使一个div的高度与视窗高度相同

Question

3

我有一个像这样的 div。

<div> ... </div>

我希望它的高度等同于视窗（而不是页面）的高度。

这是否可以通过CSS实现，还是需要编写一些JavaScript代码？

- Zo72

可能重复（Possible duplicate）：全视口高度缩放的 div，纯 CSS 实现，没有 JS 的可能吗？ - Andrei LED

3个回答

1

如果您已将视口设置为特定高度，则只需为您的div添加height:100%;即可。

- Atheist

0

如果 div 在文档中任何位置，你需要使用 JavaScript。使用 jQuery 相当简单:

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

- Chango

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pat · Accepted Answer

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

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

这段CSS代码将使得<div>元素的高度占满整个视口：

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

如果您希望 <div> 标签随内容自动扩展，CSS 代码需要更改如下：

html, body {
  height: 100%;
}

div {
  min-height: 100%;
}