让div填充空间

I'd like to put two columns on the side of the content div. The part I have problems with is that I want the columns being built from 3 parts. The top and bottom should have fixed heights, but the middle one would adjust depending on the content height. Look at the sample with one column:

我想在内容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>

What I want is the #leftColumnBottom stick at the top of the footer and red #leftColumnMiddle to fill the space between top and bottom part.

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

3 个解决方案

#1

This works in everything except IE6; for that you'll need a conditional comment and css expression to set a height instead of bottom on #leftColumnMiddle

这适用于除IE6之外的所有内容;为此你需要一个条件注释和css表达式来设置#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>

And to the commenter - it nearly worked, so that's why. ;)

对于评论者 - 它几乎起作用,所以这就是原因。 ;)

#2

try min-height for the one that needs to grow

尝试使用需要增长的最小高度

#3

If you need both columns to be of equal height, and work in IE6, you basically have to hack.

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

A solution I've used in the past involves setting up a fake margin/padding for one of the columns. This assumes that you know a upper limit of how large the columns can grow (could be in the magnitude of several thousand px's).

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

This solution is outlined here.

此处概述了此解决方案。

Quoting from the page I linked:

从我链接的页面引用:

The basic method works like this:

Blocks which will act as columns must be wrapped in a container element

作为列的块必须包装在容器元素中

Apply overflow: hidden to the container element

将overflow:hidden应用于容器元素

Apply padding-bottom: $big_value [2] to the column blocks, where $big_value is a

将padding-bottom:$ big_value [2]应用于列块,其中$ big_value为a
large enough value to guarantee that it's equal to or larger than the tallest column
Apply margin-bottom: -$big_value to the column blocks

应用margin-bottom: - $ big_value到列块

#1