Question

我有这样的div。

<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%; ..

Answer 3

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

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