划分100％页面响应高度

Question

我有一个搜索，但无法找到我想要实现的目标，无论如何我还不确定是否有可能有帮助的jQuery脚本。

我想在我的网站上创建一个div来填充整个页面的高度（滚动下面的区域只是垂直填充的屏幕的第一个区域）。我希望这可以调整到设备的高度，所以在桌面和iPhone上，例如整个屏幕垂直高度被填充。

我不确定我是否可以发布网站，但这是我追求的目标http://alexcerezo.com

Answer 1

这样做！

HTML：

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

CSS：

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

最大和最小高度确保它永远不会占用多于或少于窗口的高度（这包括它们是否将浏览器缩小到小于屏幕高度）！

：）

编辑：尼克的评论也非常重要，你所有的父母div，包括body和html也必须将min-max-height设置为100％，否则div的大小将达到100％＆＃39;父母的身高。

Answer 2

如果您希望您的div具有页面的完整高度，您可以这样做：

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

或者如果您希望它是浏览器的完整高度，请执行：

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

文档准备好后，只需执行以下任何一行即$(document).ready()。但是，您可以通过在CSS中使用height：100％设置高度，方法是正确嵌套div并将正确的高度设置为其父级。

Answer 3

有几种方法可以做到这一点。

首先，您可以尝试使用height:100vh; vh表示视口高度。 100vh表示视口高度的100％。 （如果您碰巧需要视口宽度，请使用vw。）当元素具有边距时，这可能会导致问题，并且事情会变得烦人。

另一种方法，可能更好：

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

这将忽略所有边距和填充，并且div将占据屏幕的整个高度而不会导致太多问题。如果需要，您还可以使用left:0;和right:0;

Fiddle