html div的高度（％）

我的高度现在设置为像素，一切都没问题。但是，当我把它在百分比它不显示：

我需要高度来适应我的屏幕也是宽度。

这里是CODE

我想是改变left和right div的高度，以百分比来适应屏幕。当我这样做我的div消失。

2012-06-23 user123_456

看看这个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%; 
}

它的工作。 :)

来源

2012-06-23 16:10:35

是的，这是工作 –

高兴的是，它的工作原理。谢谢。 :) –

当然它们消失了。 Div或任何默认具有display: block的元素具有100％的宽度和自动高度（由其内容定义），因此当您说50％的高度并不意味着什么因为50％的自动为0.

来源

2012-06-23 16:04:53 slash197

如果要设置内部div的百分比高，那么你必须设置它的父高度的第一，然后你内心的div将占据其高度的百分之指定的父容器。

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

#left{ height:100% }将测量是根据其高度的父DIV #container高度。

DEMO.

来源

2012-06-23 16:08:10

我有点晚了，但我还以为这就是你要找的人，因为它生长，并与窗口的尺寸缩小。这是它的jsfiddle。

这里的HTML：

<html> 
    <body onload="initialize()"> 
     <div id="container"> 
      <div id="header">Header</div> 
      <div id="left">Left</div> 
      <div id="right">Right</div> 
      <div id="footer"> Footer</div> 
     </div> 
    </body> 
</html>

这里的CSS：

html, body 
{ 
    height:100%; 
} 
#container 
{ 
    height: 100%; 
    width:98%; 
    padding-left:1%; 
    padding-right:1%; 
} 
#header 
{ 
    height:10%; 
    background-color:blue; 
} 
#footer 
{ 
    height: 10%; 
    clear:both; 
    background-color:yellow; 
} 
#left 
{ 
    background-color:red; 
    height:80%; 
    width:70%; 
    float:left; 
} 
#right 
{ 
    background-color:green; 
    height:80%; 
    width:30%; 
    float:left; 
}

来源

2012-06-23 16:37:25 GusP

html div的高度（％）

回答

相关问题