div 的高度以匹配视口的高度

【问题标题】：height of a div to match the height of the viewportdiv 的高度以匹配视口的高度
【发布时间】：2011-09-27 14:01:01
【问题描述】：

我有一个这样的 div。

<div> ... </div>

我希望它的高度是视口的高度（不是页面的高度）

是否可以通过 CSS 来实现，或者我必须编写一些 javascript 吗？

【问题讨论】：

【解决方案1】：

是的，这是可能的。只要父元素定义了高度，CSS 百分比高度就会起作用。假设这是您的标记：

<html>
  <body>
    <div></div>
  </body>
</html>

此 CSS 将导致 <div> 具有视口的完整高度：

html, body, div {
  height: 100%;
}

如果您希望 <div> 随内容一起扩展，CSS 将更改如下：

html, body {
  height: 100%;
}

div {
  min-height: 100%;
}

【讨论】：

【解决方案2】：

如果您已将 viewPort 设置为某个高度，则只需将您的 div 设置为 height:100%;..

【讨论】：

【解决方案3】：

如果 div 位于文档中的任何位置，则需要使用 javascript。用 jQuery 很简单：

$("#my-div").height($(window).height());

【讨论】：