Question

我想在内容div的一侧放两列。我遇到问题的部分是我想要从3个部分构建列。顶部和底部应该具有固定的高度，但是中间的高度可以根据内容高度进行调整。用一列查看样本：

<html><head>
<style>
* { border: 1px solid black;}
#contentWrapper     { width:450px; }
#leftColumn         { width:100px; float: left; }
#leftColumnTop      { width:100px; height:50px; background-color: gray; }
#leftColumnMiddle   { background-color: red; }
#leftColumnBottom   { width: 100px; height:50px; background-color: gray; }
#content            { width: 300px; float: left; }
#footer             { width: 400px; clear: both; }
</style>
</head>
<body>
<div id="contentWrapper">
<div id="leftColumn">
    <div id="leftColumnTop"> </div>
    <div id="leftColumnMiddle"> </div>
    <div id="leftColumnBottom"> </div>
</div>
<div id="content">content<br>
here<br>more<br>more<br>more<br>more<br>more<br>more<br>
</div>
<div id="footer">footer text</div>
</div>
</body>
</html>

我想要的是页脚顶部的#leftColumnBottom棒和红色的#leftColumnMiddle来填充顶部和底部之间的空间。

Answer 1

这适用于IE6以外的所有内容;为此你需要一个条件注释和css表达式来设置bottom上的#leftColumnMiddle而不是<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html><head> <style>* { border: 1px solid black;} #contentWrapper { position: relative; float:left; width: 450px; } #leftColumnTop { position: absolute; width: 100px; height: 50px; left: 0; background-color: gray; } #leftColumnMiddle { position: absolute; width: 100px; top: 50px; bottom: 50px; left: 0; background-color: red; } #leftColumnBottom { position: absolute; width: 100px; height: 50px; left: 0; bottom: 0; background-color: gray; } #content { width: 300px; float: left; margin-left: 100px;} #footer { width: 400px; clear: both; } </style> </head> <body> <div id="contentWrapper"> <div id="leftColumnTop"> </div> <div id="leftColumnMiddle"> </div> <div id="leftColumnBottom"> </div> <div id="content">content<br> here<br>more<br>more<br>more<br>more<br>more<br>more<br> </div> </div> <div id="footer">footer text</div> </body> </html>

{{1}}

对评论者来说 - 它几乎奏效了，所以这就是原因。 ;）

Answer 2

尝试需要增长的最小高度

Answer 3

如果你需要两个列具有相同的高度，和在IE6中工作，你基本上必须破解。

我过去使用过的解决方案是为其中一列设置假边距/填充。这假设您知道列可以增长的上限（可能是几千px的大小）。

此解决方案概述为here。

从我链接的页面引用：

基本方法的工作方式如下：

将充当列的块必须包装在容器元素中

将overflow：hidden隐藏到容器元素

将padding-bottom：$ big_value [2]应用于列块，其中$ big_value是
足够大的值，以保证它等于或大于最高列
将margin-bottom： - $ big_value应用于列块

让div填充空间

3 个答案: