Div 100％頁面響應的高度

Question

我有過搜索，但無法找到我想要達到的目標，無論如何CSS我無法確定是否有可以幫助的jQuery腳本。

我想在我的網站上創建一個div，填充頁面的整個高度（沒有比滾動下面的區域更多的垂直填充屏幕的第一個區域）。我希望這可以調整到設備的高度，例如在桌面和iPhone上，整個屏幕的垂直高度就會被填滿。

我不知道我是否可以張貼網站，但這是以後再看http://alexcerezo.com

Answer 1

如果你希望你的div在頁面的全高度，你可以做我：

$('div').css('height',$('body').height()); 

，或者如果你希望它是瀏覽器的全高度，這樣做：

$('div').css('height',$(window).height()); 

只需執行這些線路一旦該文件已準備就緒，即$(document).ready()。但是，您可以通過使用高度來設置高度：通過正確嵌套div並將正確高度設置爲其父項，在CSS中設置100％。

Answer 2

做到這一點！

HTML：

<div id="myDiv"> Content </div> 

CSS：

#myDiv 
{ 
    min-height: 100%; 
    max-height: 100%; 
} 

最大和最小高度確保它不會佔用多於或少於該窗口的高度（包括如果他們縮小瀏覽器小於屏幕高度）！

:)

編輯：尼克的評論也是非常重要的，你所有的父div的，包括身體和HTML還必須有最小 - 最大高度設置爲100％，否則格將大小爲100％它父母身高。

Answer 3

有幾種方法可以做到這一點。

首先，您可以嘗試使用height:100vh;，其中vh表示視口高度。 100vh表示視口高度的100％。 （如果您碰巧需要視口寬度，請使用vw。）當元素具有邊距時，這可能會導致問題，並且可能會引起惱人的問題。

另一種方法，這可能是更好：

top:0; 
bottom:0; 
position:absolute; 

它會忽略所有利潤和填充，那麼div會佔據屏幕的整個高度，而不會造成太多的問題。如果需要，您還可以使用left:0;和right:0;

Fiddle