0

嗨,我对 html 高度有疑问。

我的高度现在设置为像素,一切正常。但是当我以百分比表示时,它没有显示:

我也需要像宽度一样调整高度以适应我的屏幕。

这是代码

我想要的是将div 的高度更改leftright适合屏幕的百分比。当我这样做时,我的 div 消失了。

4

4 回答 4

2

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

于 2012-06-23T16:04:53.513 回答
1

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

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

#left{ height:100% }将根据它的父 div 高度来测量它的#container高度。

演示。 ​</p>

于 2012-06-23T16:08:10.813 回答
1

看看这个小提琴。我以这种方式更改了 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-23T16:10:35.500 回答
1

我有点晚了,但我会认为这就是你正在寻找的东西,因为它会随着窗口的大小而增长和缩小。这是它的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-23T16:37:25.397 回答