所有使用top: 0em; bottom 0em;
的建議都不正確。如果頁面比視口高,那麼代碼會將div拉伸到視口底部之外。如何使div viewport的高度,而不是CSS中的頁面高度?
其他建議使用100vh
不幸的是沒有足夠的支持(我需要它在4.4之前的Android瀏覽器中工作)。
這是可能的只有CSS?
所有使用top: 0em; bottom 0em;
的建議都不正確。如果頁面比視口高,那麼代碼會將div拉伸到視口底部之外。如何使div viewport的高度,而不是CSS中的頁面高度?
其他建議使用100vh
不幸的是沒有足夠的支持(我需要它在4.4之前的Android瀏覽器中工作)。
這是可能的只有CSS?
要使元素的高度達到100%,請將html,body和元素的高度設置爲100%。
html,
body,
#your-element { height:100%; }
編輯 - 摘錄:
* { margin:0; padding:0; }
html,body,div { height:100%; }
div { background: #0f0; }
<div></div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
如果你的容器可以是固定的,你可以只使用height: 100%
如果你需要的任何其他的定位,將需要使用JavaScript來做到這一點。
請重新閱讀我的文章。我希望它是視口高度,*不是*頁面高度。 – 2014-10-31 16:44:35
@DonRhummy - 請嘗試代碼,這就是它的作用。 – Adam 2014-10-31 16:44:51
我的代碼並沒有與那個工作,因爲我有另一個div是'visibility:hidden',而iOS Safari並沒有將滾動手勢指向非隱藏div(但firefox,chrome都這樣做) – 2014-10-31 18:14:44