如何使三个内部divs的高度相同？ [英] how to make three inside divs the same height?
问题描述
我有一个容器div＃内容，其中包含三个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背景的包装 - 模拟列的背景的图像。这种方法在所有现代浏览器中始终如一地工作（即使在这种情况下也算是现代化的）。否定的部分是，您需要一个至少与页面允许展开一样宽的背景图片。即X像素宽和1px高。
I have a container div#content, which contains three divs inside. Now, how could I make sure that three divs inside have the same height? Of course, I hope each div's height could be expanded according to its content. For example: here is what I tried
<!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>
A very useful technique for creating divs of equal height is to emulate it with a technique called "Faux Columns". This was an idea first suggested by Dan Cederholm (You can read his original article here), and has since evolved. You can see a good tutorial here. If you need it in a liquid layout environment, you might want to read this article.
Basically, the idea builds on NOT trying to force the divs to be of equal height, but have a wrapper of the three divs with a background-image that simulates the background of the columns. This approach works consistently among all modern browsers (ie6 even counts as modern in this context). The negative part is that you'll need a background image that is at least as wide as the page is allowed to expand. i.e. X pixels wide and 1px high.
这篇关于如何使三个内部divs的高度相同？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
