html - 底部：0 在溢出-y 出现时不起作用

Question

请看我的 jsFiddle http://jsfiddle.net/LY8ze/1/

在我的 div 中有内容和页脚。(2 节)页脚必须保持在bottom:0.

当滚动条不出现时。页脚显示正确。但是当滚动条出现时，页脚不会停留在底部。你可以在我的 jsFiddle 中看到它作为第一个图。

我怎样才能通过仅使用 css 和 html 来解决这个问题？

Answer 1

您正在寻找的是固定位置，但在您的情况下它会失败，您需要为此使用 jQuery，否则您可以通过使用容器元素来欺骗它，然后相应地更改标记

演示

甚至是更好的解决方案（适用于第一种和第二种情况）

1.
<div class="wrap">
<div class="container">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean semper sagittis velit. Cras in mi. Duis porta mauris ut ligula. Proin porta rutrum lacus. Etiam consequat scelerisque quam. Nulla facilisi. Maecenas luctus venenatis nulla. In sit amet dui non mi semper iaculis. Sed molestie tortor at ipsum. Morbi dictum rutrum magna. Sed vitae risus.
        <br />
        <img src="http://i.imgur.com/RKA1Kkk.jpg" style="width:250px;height:150px" />
</div>
    <div class="footer">
        Author : OammieR
    </div>
</div>

CSS

.container {
    height: 250px;
    overflow-y: auto;
    position: relative;
    width: 300px;
    word-wrap: break-word;
    margin:10px;
    padding:5px;
    background-color:#C1C2C3;
}

.wrap {
    background: #c1c2c3;
    width: 330px;

}

.footer {
    color:red;
    padding-left: 15px;
    padding-bottom: 10px;
}

Answer 2

利用：-

.footer {
    bottom: 0;
    position: relative;   // changed from absolute to relative
    color:red;
}

Answer 3

我可以试试这个：

CSS

.container {
    background-color: #C1C2C3;
    margin: 10px;
    min-height: 250px;
    overflow-y: auto;
    padding: 5px;
    position: relative;
    width: 300px;
    word-wrap: break-word;
}