我有一个容器div#content,里面包含三个div.现在,我怎么能确保里面的三个div有相同的高度？当然,我希望每个div的高度可以根据其内容进行扩展.例如:这是我尝试过的
<!doctype html public "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<title></title>
<style type="text/css">
#content{background-color:#DDDDD;width:100%;overflow:auto;clear:both;height:100%;}
#col1{background-color:yellow;width:10%;float:left;height:100%;}
#col2{background-color:red;width:30%;float:left;height:100%;}
#col3{background-color:#AAAAAA;width:10%;float:left;;height:100%;}
</style>
</head>
<body>
<div id="content">
<div id="col1">
<script language="javascript">
for(i=0;i<1000;i++){
document.write(i+"<br />");
}
</script>
</div>
<div id="col2">
<script language="javascript">
for(i=0;i<100;i++){
document.write(i+"<br />");
}
</script>
</div>
<div id="col3">
<script language="javascript">
for(i=0;i<10;i++){
document.write(i+"<br />");
}
</script>
</div>
创建相同高度的div的一种非常有用的技术是使用称为"Faux Columns"的技术来模拟它.这是Dan Cederholm首先提出的一个想法(你可以在这里阅读他的原创文章),并且已经发展了.你可以在这里看到一个很好的教程.如果您在液体布局环境中需要它,您可能需要阅读本文.
基本上,这个想法建立在不试图强制div具有相同高度的基础上,而是具有三个div的包装,其背景图像模拟列的背景.这种方法在所有现代浏览器中都是一致的(即6在这种情况下甚至算作现代浏览器).负面的部分是,您需要一个至少与允许页面扩展一样宽的背景图像.即X像素宽和1px高.
我经常被CSS纯粹主义者抨击这个建议,但每当我遇到这样的问题时 - 据我所知 - CSS根本就没有提供解决方案(不,"改变你的设计"不会计数!)...
我建议在布局的那一部分使用表格.
在所有主流浏览器中,表格可以轻松准确地进行垂直大小调整.我将继续推荐它们,直到CSS为这些问题提供可行的解决方案.