html - 绝对定位页脚

Question

我有一个容器，其中包含一个向左浮动和一个向右浮动的 div。

我想在地板上的右侧 div 上放置一个页脚。左右 div 都需要相对于最高的 div 展开，页脚应始终位于右侧 div 的底部。

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

编辑:

---

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

---

编辑

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

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