Div 100％页面响应高度

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

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

我不确定我是否可以发布网站，但这是我在http://alexcerezo.com之后的样子

做这个！

HTML：

  Content

CSS：

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

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

🙂

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

如果您希望您的div具有页面的完整高度，您可以执行以下操作：

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

或者如果您希望它是浏览器的全高，请执行以下操作：

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

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

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

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

另一种方法，可能更好：

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

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

小提琴