在CSS中将屏幕高度设置为div的高度

Question

我一直在研究HTML5，javascript和CSS，我想获得屏幕的高度，并在CSS中相应地设置我的“div”的高度，而不使用javascript和jquery ..这样它就可以调整到任何屏幕。 我尝试过使用height = 100％但是它的高度和div的内容一样长。 任何想法都会帮助我......

提前致谢!!

Answer 1

设置高度= 100％应该有效 - 确保包含元素也设置为100％高度，并添加位置：绝对

这是一个小提琴：

http://jsfiddle.net/C3anM/

<div id="wrapper">Test content </div>

+

#wrapper {
    height:100%;
    background-color:green;
    position:absolute;
}

Answer 2

我认为你试图绝对定位它。

div{
    height:100%;
    width:100%;
    position:absolute;
    border:1px solid red;
}

http://jsfiddle.net/btevfik/DMUcY/

默认情况下，位置是静态的。所以div是按顺序定位的，它们的高度是按其内容计算的，除非你为高度设置px值。

http://jsfiddle.net/btevfik/MjM9Y/

Answer 3

你必须设置：

html, body
{
    height: 100%;
} 

jsFiddle：http://jsfiddle.net/sG8gm/

Answer 4

我认为您可能正在寻找与视口相关的CSS单位。 They're not supported across the board目前，但在使用现代浏览器的用户中得到了很好的支持。

The spec将它们定义如下：

  

大众单位

     

等于初始包含块宽度的1％。

     

vh单位

     

等于初始包含块高度的1％。

     

vmin unit

     

等于'vw'或'vh'中的较小者。

     

vmax单位

     

等于'vw'或'vh'中的较大者。

典型的百分比宽度是元素相对于最近父元素的大小，或者，在绝对定位的情况下，最接近的父元素具有position: relative;，而视口相对长度将始终相对于......计算。视口，无论树中的父元素如何。