嗨,我对 html 高度有疑问。
我的高度现在设置为像素,一切正常。但是当我以百分比表示时,它没有显示:
我也需要像宽度一样调整高度以适应我的屏幕。
这是代码
我想要的是将div 的高度更改left
为right
适合屏幕的百分比。当我这样做时,我的 div 消失了。
他们当然会消失。div 或任何display: block
默认具有 100% 宽度和自动高度(由其内容定义)的元素,所以当你说你想要 50% 高度时,这并不意味着什么,因为 50% 的 auto 是 0。
如果你想以百分比设置内部 div 的高度,那么你必须先设置它的父高度,然后你的内部 div 将占据其父容器高度的指定百分比。
#container {
width:98%;
height:570px;
padding-left:1%;
padding-right:1%;
}
#left{ height:100% }
将根据它的父 div 高度来测量它的#container
高度。
演示。 </p>
看看这个小提琴。我以这种方式更改了 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%;
}
有用。:)
我有点晚了,但我会认为这就是你正在寻找的东西,因为它会随着窗口的大小而增长和缩小。这是它的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;
}