如何在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或JavaScript完成此任务:

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

但我试图弄清楚如果这是可能的纯CSS。任何想法吗?谢谢。

Answer 1

try:

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

Answer 2

为right和bottom也指定一个0值

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

Answer 3

可以通过元素的绝对定位来实现。

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

将这个类应用于你想要设置100%窗口高度的元素。