html div in height (%)

Question

嗨，我有关于html高度的问题。

我的身高现在被设置为像素，一切都很好。但是当我把它放在百分比中时，它没有显示：

我需要高度来适应我的屏幕，宽度也一样。

这是CODE

我想要的是将left和right div的高度更改为适合屏幕的百分比。当我这样做的时候，我的div就消失了。

Answer 1

看看这个fiddle。我这样更改了CSS：

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

#footer
{
clear:both;
text-align:center;
background-color:#4671D5;
 -moz-border-radius-bottomleft: 100px 50px;
  border-bottom-left-radius: 100px 50px;
  -moz-border-radius-bottomright: 100px 50px;
  border-bottom-right-radius: 100px 50px;
}
#left
{
background-color:red;
height:100%;
width:80%;
float:left;
}
#right
{
background-color:blue;
 float:left;
 width:20%;
 margin:0;
  height:100%;
}
#header
 {
 background-color:#4671D5;
 -moz-border-radius-topleft: 100px 50px;
  border-top-left-radius: 100px 50px;
  -moz-border-radius-topright: 100px 50px;
  border-top-right-radius: 100px 50px;
    height: 100%;
 }
 #container
 {
 width:98%;
 padding-left:1%;
 padding-right:1%;
    height: 100%;
 }

它起作用了。:)

Answer 2

他们当然会消失。Div或任何默认具有display: block的元素都有100%的宽度和自动高度(由其内容定义)，所以当你说你想要50%的高度时，这并不意味着什么，因为50%的自动是0。

Answer 3

如果你想用百分比来设置内部div的高度，那么你必须首先设置它的父高度，然后你的内部div将占据它的父容器的高度的指定百分比。

#container {
    width:98%;
    height:570px;
    padding-left:1%;
    padding-right:1%;
}

div会根据父#container的高度来测量它的高度。

​