CSS三列布局-列高问题

Question

我从CSS入手，遇到了“等高”问题，其中浮动DIV的高度取决于其内容。 我发现了几种解决方法，并尝试应用该解决方法，但没有成功：在三列布局中，所有三列都得到了扩展，但是左，右列似乎与页脚部分重叠。 （这发生在IE 8和FF 3.5.10中）这是图片：

我希望所有三列都具有相同的大小，并放在页眉和页脚节之间。 这是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初学者，以上是复制/粘贴和我尝试过的不同调整的结果，因此对您有所帮助，

（我已将此问题发布到其他地方，但没有回复。）

Answer 1

您是否尝试过圣杯？ 我过去曾经成功

CSS三列布局-列高问题

问题描述

1 个解决方案

解决方案1
1 已采纳 2010-07-11 08:38:01

CSS三列布局-列高问题

问题描述

1 个解决方案

解决方案1 1 已采纳 2010-07-11 08:38:01

解决方案1
1 已采纳 2010-07-11 08:38:01