Question

我有一个容器，其中包含一个浮子和一个浮子右div。

我想将一个页脚放在地板上的右侧div上。左右div需要相对于最高div进行扩展，并且页脚应始终保持在右侧div的底部。

我怎样才能做到这一点？有人可以给我一个例子或指点我教程吗？ enter image description here

修改

好的，抱歉我的可怕照片，但我想你明白了。此外，如果左边的div比右边的高，右边的div应该与左边一起增长，反之亦然。如果右边的内容增长，它不应该溢出到页脚上。

修改

这是jackthetipper最新尝试的截图。即使内容已添加到左侧，页脚也不在右侧div的底部。 enter image description here

Answer 1

关注http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/，以便更好地了解您所使用的布局。

现在要在右侧div中获得页脚，请将完成的布局http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html中的HTML更改为：

<div id="sidebar">
<div>
    <h2>Column 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris vel magna.</p>
    <ul>
        <li><a href="/">Link 1</a></li>
        <li><a href="/">Link 2</a></li>
        <li><a href="/">Link 3</a></li>
        <li><a href="/">Link 4</a></li>
        <li><a href="/">Link 5</a></li>
        <li><a href="/">Link 6</a></li>
        <li><a href="/">Link 7</a></li>
        <li><a href="/">Link 8</a></li>
        <li><a href="/">Link 9</a></li>
        <li><a href="/">Link 10</a></li>
        <li><a href="/">Link 11</a></li>
        <li><a href="/">Link 12</a></li>
        <li><a href="/">Link 13</a></li>
        <li><a href="/">Link 14</a></li>
        <li><a href="/">Link 15</a></li>
    </ul>
</div>
<div id="sub-footer">
    <p>Footer</p>
</div>
</div>

然后添加以下CSS：

# {
    padding: 5px 10px;
    background: #CC9;
    margin-top: auto;
    margin-bottom: 0;
    position: fixed;
    bottom: 0;
    width: 205px;
}

Answer 2

Live demo。我相信这就是你要找的东西：

HTML

<div id="wrapper">
    <div id="left">Left</div>
    <div id="right">Right</div>
    <div id="rightfooter">Text</div>
</div>

CSS

#wrapper {
    width: 300px;
    height: 200px;
}
#left{
    background-color: #82ff68;
    float: left;
    width: 50%;
    height: 100%;
}
#right{
    background-color: #ff5c4a;
    float: left;
    width: 50%;
    height: 100%;
}
#rightfooter {
    height: 1em;
    width: 50%;
    background-color: blue;
    float: right;
}

评论后编辑

Demo在div中添加页脚

评论后编辑2

第二个demo具有不断扩大的高度（相互依赖）

绝对定位页脚

2 个答案: