Question

我开始使用CSS并且遇到了“相等列高”问题'，其中浮动DIV根据其内容具有不同的高度。我找到了几个解决方法，并尝试应用this one，但已经成功：在三列布局中，所有三列都被扩展，但左侧和右侧列似乎与页脚部分重叠。（这发生在IE 8和FF 3.5.10中）以下是图片：

alt text http://img706.imageshack.us/img706/4930/testrz.jpg

我希望所有三列都具有相同的大小，并放置在页眉和页脚部分之间。这是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

你试过The Holy Grail吗？我过去成功了

CSS三列布局 - 列高度问题

1 个答案: