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

Question

我一直在研究 HTML5、javascript 和 CSS，我想获得屏幕的高度并仅在 CSS 中相应地设置我的“div”的高度，而不使用 javascript 和 jquery .. 以便它可以自行调整到任何屏幕。我试过使用 height=100% 但它的高度与 div 的内容一样长。任何想法请帮助我..

提前致谢！！

Answer 1

设置 height=100% 应该可以 - 确保包含的元素也设置为 100% 高度，并添加 position:absolute

这是一个小提琴：

http://jsfiddle.net/C3anM/

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

+

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

Answer 2

我认为您可能正在寻找与视口相关的 css 单元。目前它们并未得到全面支持，但在使用现代浏览器的用户中得到了很好的支持。

规范将它们定义如下：

大众单位

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

单位

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

最小单位

等于“vw”或“vh”中的较小者。

最大单位

等于“vw”或“vh”中的较大者。

典型的百分比宽度相对于最近的父元素调整元素的大小，或者在绝对定位的情况下，最近的父元素与position: relative;视口相对长度将始终相对于...计算视口，无论父元素在那个树。

Answer 3

我认为您正在尝试绝对定位它。

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

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

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

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

Answer 4

你必须设置：

html, body
{
    height: 100%;
} 

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