Question

这是我的简单代码

<!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％。

Answer 1

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

设置html, body {height: 100%}

来自文档 -

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

在{ - 3}}

上查看详情

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

<!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>

Answer 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 (with margin, notice scrollbars)
jsFiddle (without margin)

html, 
body {
    height:100%;
    margin: 0;
}

为什么css身高100％不适用于普通div？

2 个答案: