绝对定位页脚

Question

我有一个容器，里面有一个左浮动和一个右浮动div。

我想把脚放在右边的地板上。左和右div都需要相对于最高的div展开，而页脚应该始终停留在右侧div的底部。

我怎样才能做到这一点？有人能给我举个例子或者给我指点教程吗？

​

编辑：

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

编辑

这是自谋者最新尝试的截图。页脚尚未位于右侧div的底部，即使内容已经添加到左侧。

​

Answer 1

现场演示。我相信这就是你想要的：

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;
}​

注释后的编辑

在div中有页脚的演示

注释后的编辑2

具有扩展高度的第二个演示 (相互依赖)

Answer 2

遵循标准/col布局/2-col/，以便很好地理解您所追求的布局。

现在要实现右div中的页脚，请将已完成的布局标准/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;
}