CSS三列布局 - 列高度问题 [英] CSS Three Column Layout - Column Height Problem
问题描述
我从CSS开始，遇到等列高度问题，其中浮动DIV根据其内容具有不同的高度。我找到了几个解决方法，并尝试应用这一个，但Havend已成功：所有三列的三列布局被扩展，但是左和右列似乎与页脚部分重叠。 （这发生在IE 8和FF 3.5.10）下面是图片：
I am starting with CSS and have run into the 'equal column height' problem', where floated DIVs have different height depending on their content. I have found several workarounds and attempted to apply this one, but havend been successful: in a three column layout all three columns are extended, but the left and the right column seem to overlap with the footer section. (This happens in IE 8 and in FF 3.5.10) Here is the picture:
alt text http://img706.imageshack.us/img706/4930/testrz.jpg
我希望所有三个列的大小相同，并放置在页眉和页脚部分之间。这是HTML：
I would like all three columns to be of the same size and placed betweed the header and the footer section. Here is the HTML:
<body>
<div id="container">
<div id="top">
<h1>Header</h1>
</div>
<div id="leftnav">
<p>Left</p>
</div>
<div id="rightnav">
<p>RightNav</p>
</div>
<div id="content">
<p>Content</p>
</div>
<div id="footer">
<h4>Footer</h4>
</div>
</div>
</body>
这里是当前的CSS：
body
{
font-family: Verdana, Sans-Serif;
font-size:0.75em;
line-height:1.5em;
margin:1.5em;
}
#container
{
overflow:hidden;
min-width: 50em;
margin: 0.625em auto;
background-color: #fff;
color: #333;
border: 1px solid gray;
}
#top
{
padding: 0.5em;
background-color: #ddd;
border-bottom: 1px solid gray;
}
#top h1
{
padding: 0;
margin: 0;
}
#leftnav
{
float: left;
width: 10em;
margin: 0;
padding: 1em;
background-color:#ec7;
}
#rightnav
{
float: right;
width: 10em;
margin: 0;
padding: 1em;
background-color:#db6;
}
#content
{
margin-left: 10em;
margin-right: 10em;
padding-left:3em;
padding-right:3em;
padding-top:1em;
min-width:10em;
text-align:justify;
background-color:#bab;
}
#leftnav, #rightnav, #content
{
padding-bottom:1000em;
margin-bottom:-1000em;
}
#footer
{
clear: both;
margin: 0;
padding: 0.5em;
color: #333;
background-color: #ddd;
border-top: 1px solid gray;
}
如你所见，我是一个CSS初学者，复制/粘贴的结果和我尝试过的不同的调整，所以任何帮助是赞赏，
As you can see, I am a CSS beginner, and the above is the result of copy/paste and different tweaks I have attempted, so any help is appreciated,
（我已经发布这个问题在其他地方，但没有回应。）
(I have posted this question elsewhere, but without response.)
推荐答案
您是否尝试过圣杯？我过去已经取得了成功。
Have you tried The Holy Grail? I've had success with it in the past
这篇关于CSS三列布局 - 列高度问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
