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