Css 随着div中内容的增加而增加div

我的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中使用

position:absolute

。尝试将其浮动（并将

溢出：隐藏
添加到容器以清除内部浮动）：

#页面环绕{宽度：100%；高度：100%；}
#内容{溢出：隐藏；}
#标题{宽度：100%；高度：97px；位置：相对；}
#左{浮动：左；宽度：20%；背景色：#1C2326；}
#右{浮点：左；宽度：80%；背景色：#2D3538；颜色：#fff；}
#页脚{高度：80px；背景色：#72D27C；}

我想这可能更接近你的想法。您可以让左div（静态位置，无浮动）设置内容的高度，然后将右div的顶部和底部固定到内容div。随着左div的增长，内容也会增长，而右div与内容绑定，从而提供您想要的效果。然而，这是不对称的——如果您希望其中一个div使另一个div跟随它，这是另一个问题

CSS:

没有大小不增加。。它正在增加到浏览器高度并停止。您对html和/或正文有CSS规则吗？请参见：。如果你需要将左栏背景色涂到底部，我建议用相同的颜色绘制#content div。嗯，好主意，如果我想通过保持右栏大小不变来增加左栏，那么我该怎么办？？？你不知道哪一列是最高的？
  #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;}

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;
}