html - 如何在CSS中将分区的高度设置为窗口的高度？

Question

我有一个必须覆盖屏幕（窗口）的总高度和高度的分区。例如：HTML：

<div id="all"></div>

我正在尝试完成这样的事情：

#all{
  width:100%;
  height:100%;
  position:absolute;
  top:0px;
  left:0px;
}

我相信这是不可能的，因为如果文档没有完全填满，CSS 就无法计算窗口的大小。如果我错了，请纠正我，这只是一个理论。如果我的理论是正确的，是否可以将 body 的高度默认设置为窗口高度的 100% 以便它可以工作？

就像是：

body{
 height:100%
}

我知道如何使用 Jquery o JavaScript 完成此操作：

$(document).ready(function(){
  $('#div').css({
    height:$(window).height(),
    width:$(window).width()
 });
});

但我想弄清楚这是否可以用纯 CSS 实现。有什么想法吗？谢谢。

score 0 · Accepted Answer

0

尝试：

html, body, #all
{
  margin: 0px;
  padding: 0px;
  height: 100%;
  width: 100%;
}

于 2013-05-08T02:24:02.957 回答

score 0 · Accepted Answer

只需为and指定一个0值。rightbottom

#all { top:0; left:0; right:0; bottom:0; position:absolute; }

score 0 · Accepted Answer

您可以通过元素的绝对定位来实现这一点。

.fullHeight
 {
  position: absolute; 
  top: 0px; 
  bottom: 0px;
 }

将此类应用于要为其设置 100% 窗口高度的元素。

3 回答 3