Question

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

在我的div中有内容和页脚。（2个部分）页脚必须留在bottom:0。

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

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

Answer 1

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

甚至是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;
}

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

底部：0出现溢出时不起作用

3 个答案: