html - 底部 :0 not working when overflow-y appear

Question

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

在我的 div 中有内容和页脚。(2 个部分)页脚必须位于 bottom:0。

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

如何仅使用 css 和 html 来解决这个问题？

Answer 1

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

Demo

甚至是 better solution (适用于第一种和第二种情况)

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