Div 100％页面响应高度[重复]答案

【问题标题】：Div 100% height of page responsive [duplicate]Div 100％页面响应高度[重复]
【发布时间】：2014-08-01 21:53:41
【问题描述】：

我已经进行了搜索，但找不到我想要实现的确切目标，无论如何我不确定是否有可以提供帮助的 jQuery 脚本。

我想在我的网站上创建一个 div 填充页面的整个高度（不超过滚动下方的区域，只是垂直填充的屏幕的第一个区域）。我希望它适应设备的高度，例如在桌面和 iPhone 上，整个屏幕的垂直高度都被填充了。

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

【解决方案2】：

这样做！

HTML：

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

CSS：

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

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

编辑：Nick 的评论也非常重要，包括 body 和 html 在内的所有父 div 也必须将 min-max-height 设置为 100%，否则 div 的大小将达到其父级高度的 100%。

【讨论】：

【解决方案3】：

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

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

另一种可能更好的方法：

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

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

【讨论】：