漲姿式！打造全屏網頁只要一行CSS

時間 2019-12-10

標籤打造全屏網頁只要一行 css 欄目 HTML 简体版

原文原文鏈接

現代的網站不少都在它們的主頁放有全屏的區域(.section)。就算不是全屏幕，也至少佔了全屏的80%~90%，而這須要大量的開發時間和javascript代碼。javascript

仍是給你舉一個我這裏所說的正在使用此佈局的網站例子。css

他們使用data屬性來保存高度比例好比: data-autosize="0.6" 而後用JS來設置每個區域的高度web

Exposure 爲他們的頭部使用了一個固定的90%的高度，在縮放時使用JS來改變高度佈局

Nimber 使用的技術和spotify相似，高度用JS設置爲90%並加上min-height來確保這塊區域高於視圖區域，這樣一般在手機端也能正確顯示。網站

雅虎在今年早些時候推出了一個全屏版本的Flickr，設置每個區域(section)的高度爲100%，而且替換默認的滾動爲JS控制的滾動高度，這裏有一篇文章介紹它是如何實現的。spa

前面全部的例子都是用JavaScript實現的，而下面就是見證奇蹟的時刻:

咱們使用純CSS來實現前面的說的佈局，而且支持大多數的現代瀏覽器

要是咱們只用一行CSS來實現……

.section { height: 100vh; }

是的，視窗高度（viewport height）， 1vh = 1%的瀏覽器高度

無需任何輔助，視窗高度知道你的瀏覽器每一時刻的高度，而且能夠由此設置你要的區域(section)高度，我用此方法作了一個Demo，我試着改變窗口大小它也能完美適應哦！

這個方法是如此強大，由於你能夠無限的組合佈局，若是你說，你想要全部的區域都是100%的高度，除了第一屏是90%，同時要保持頁面是連續的。好的，你須要的是另加一行CSS:

.section { height: 100vh;}
.section—first { height: 90vh; }

至於瀏覽器的支持狀況也是很是好的，它在測試網站caniuse.com獲得了78.38% 的結果，同時支持IE9+

這個方法看起來是很是不錯的，雖然沒有獲得大範圍的使用測試，我也說不出這種技術有什麼缺陷的地方，或者你該用與不應用。可是你能夠視自身狀況嘗試一下。你能夠先備份好你爲瀏覽器寫的一些JavaScript，或者找其餘的替代。

最後我不得再也不提一個切片作得很好的例子，也是隻使用了CSS，可是用了一點點不一樣的技巧。

這傢伙給頭部使用了一個 position:fixed 並給它的區域使用了完美的100%高度，這是一個稍稍不一樣的例子，各有利弊，但確實是一個不用JS的例子！

轉載自：Hinpc.com
做者：Leon
原帖地址：http://blog.hinpc.com/up-position-create-full-web-pages-as-long-as-a-single-line-css/

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。