为什么CSS高度100％不适用于正常的div？

这是我简单的代码为什么CSS高度100％不适用于正常的div？

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

来源

2013-07-02 Natesan

对于%的工作，你需要设置高度为parent element以及。

集html, body {height: 100%}

从文件 -

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

检查更多关于这在 - 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-02 03:48:34 swapnesh

感谢。正是我想要的。 – Natesan

你可以做到这一点使用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; 
}

来源

2013-07-02 03:50:42

为什么CSS高度100％不适用于正常的div？

回答

相关问题