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

Question

我有这样的股利。

<div> ... </div>

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

是否有可能通过CSS做到这一点，或者我必须编写一些JavaScript吗？

Answer 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%;
}

Answer 2

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

Answer 3

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

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