关于jquery：Div 100％页面响应高度


Div 100% height of page responsive

本问题已经有最佳答案，请猛点这里访问。

我已经进行了搜索，但找不到我想要实现的目标，无论如何，在CSS中，我不确定是否有一个jquery脚本可以帮助我。

我想在我的网站上创建一个DIV，它填充页面的整个高度(不超过滚动条下面的区域，即垂直填充屏幕的第一个区域)。我想把这个调整到设备的高度，例如在桌面和iPhone上，整个屏幕的垂直高度都被填满了。

我不确定我是否可以发布网站，但这是我在寻找http://alexerezo.com

相关讨论

这样做！

HTML：

1
 Content

CSS：

1
2
3
4
5
#myDiv
{
    min-height: 100%;
    max-height: 100%;
}

最大和最小高度确保它不会占用超过或低于窗口高度(这包括如果它们将浏览器缩小到小于屏幕高度)！

：)

编辑：尼克的评论也非常重要，你所有的父级div，包括body和html，也必须将min max height设置为100%，否则，div将大小设置为父级height的100%。

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

首先，您可以尝试使用height:100vh;，其中vh表示视区高度。100vh代表视区高度的100%。(如果您碰巧需要视区宽度，请使用vw。)这可能会在元素有边界时导致问题，并且事情会变得烦人。

另一种方法可能更好：

1
2
3
top:0;
bottom:0;
position:absolute;

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

小提琴

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

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

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

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

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