1

这是我的简单代码

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS 高度 100% 不适用于 DIV。

我知道一些其他的CSS代码来获得这个。但是为什么这段代码不起作用。如何在没有任何脚本的情况下处理高度 100% 和宽度 100%。

4

2 回答 2

7

为了%工作，您还需要设置高度parent element。

放html, body {height: 100%}

从文档 -

是相对于包含块的高度计算的。如果未明确指定包含块的高度，则该值计算为 auto。根元素（例如 ）上的百分比高度相对于初始包含块（其尺寸等于视口的尺寸）。

在 - MDN Percent Doc上查看更多信息

所以在你的情况下，你可以这样做 -

<!DOCTYPE html>
<html>
    <head>
        <style>
            html,body{height:100%;}
        div{height:100%;width:100%;background:red;position:relative;}
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>
于 2013-07-02T03:48:34.447 回答
2

您可以使用position:aboslute;

jsFiddle

div {
    background:red;
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
}
body {
    background-color:blue;
}

或者，您也可以将html高度设置body为 100%，如果走这条路线，请务必从正文中剥离边距。

jsFiddle（有边距，注意滚动条）
jsFiddle（无边距）

html, 
body {
    height:100%;
    margin: 0;
}
于 2013-07-02T03:50:42.353 回答