使div填充空间

我想在内容div的一侧放置两列。我有问题的部分是我想要从3部分构建的列。顶部和底部应该有固定的高度，但中间的会根据内容高度进行调整。看样品与一列：使div填充空间

<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的顶部，以填补顶部和底部之间的空间。

来源

2009-02-03 ya23

您是否必须使用固定大小？ – rjzii 2009-02-03 16:12:10

恐怕我不明白如何在没有固定尺寸的情况下制作它。当使用一个屏幕的百分比时，将被设置为这些div的背景的图像将创建一个非常好的混乱。 – ya23 2009-02-03 16:49:53

这工作的一切除了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>

而对于评论者设定的高度，而不是bottom - 它几乎工作，所以这就是为什么。 ;）

来源

2009-02-03 15:42:20

尝试最小高度为需要成长

来源

2009-02-03 15:41:22

如果有人仍然在意Internet Explorer 6，则div不支持min-height。它似乎完全得到所有主流浏览器的最新版本的支持，但是，除非你是一个浏览器兼容性的巨头，否则不要这样做。 – 2009-02-03 20:39:15

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

我过去使用过的解决方案包括为其中一列设置假边距/填充。这假定你知道列的长度有多大的上限（可能是几千像素的数量级）。

该解决方案概述为here。

从页面我联系报价：

的基本方法是这样的：

块将作为列必须在一个容器元素

应用溢出包裹：隐藏在容器元素

将填充底部：$ big_value [2]应用于列块，其中$ big_value是
足够大的值以保证它等于或大于最高列
应用保证金底部： - $ big_value列块

来源

2009-02-03 15:58:33 gnud

使div填充空间

回答

相关问题