我的HTML结构如下:
<div id="pagewrap">
<div id="header">
</div>
<div id="content">
<div id="left"></div>
<div id="right"></div>
</div>
<div id="footer"></div>
</div>
当内容div中的div中的div增加为与其他div相同的大小时,我想增加内容div的大小。
我怎样才能做到这一点?
这就是我的css:
#pagewrap
{
width: 100%;
height: 100%;
}
#header{width: 100%;height:97px;position:relative;}
#left{position:absolute;left:0px;width:20%;background-color:#1C2326;}
#right{position:absolute;right:0px;width:80%;background-color:#2D3538;color:#fff;}
#footer{clear:both;height: 80px;background-color:#72D27C;}
答案 0 :(得分:1)
如果您希望包装器受内容维度的影响,则不能在内部div中使用position: absolute
。尝试浮动它们(并将overflow: hidden
添加到容器中以清除内部浮动):
#pagewrap { width: 100%; height: 100%; }
#content { overflow: hidden; }
#header { width: 100%; height: 97px; position:relative; }
#left { float: left; width: 20%; background-color: #1C2326; }
#right { float: left; width: 80%; background-color: #2D3538; color: #fff; }
#footer { height: 80px; background-color: #72D27C; }
答案 1 :(得分:0)
我想也许这个fiddle更接近你的想法。您可以让左div(静态位置,无浮点)设置内容的高度,然后将右侧div的顶部和底部固定到内容div。随着左边的增长,内容会增长,而且内容与内容紧密相连,为您提供所需的效果。然而,这是不对称的 - 如果你想让一个div导致另一个跟随它,那就是另一个问题。
CSS:
html, body {
height: 100%;
}
#pagewrap {
width: 100%;
height: 100%;
}
#content {
position: relative;
}
#header {
width: 100%;
height:97px;
}
#left {
left:0px;
width:20%;
background-color:#1C2326;
color: #fff;
top: 0;
}
#right {
position:absolute;
right:0px;
width:80%;
background-color:#2D3538;
color:#fff;
bottom: 0;
top: 0;
}
#footer {
clear:both;
height: 80px;
background-color:#72D27C;
}