如何创建底部对齐的div元素

Question

我正在尝试创建一些始终位于页面底部的元素。目前我正在使用这个CSS来实现它。

#bottomContainer {
position: fixed;
bottom: 0;
width: 100%;
margin-top: 70px;
}

不幸的是，缩小页面时，这些元素会覆盖页面的其他部分，而不是像其他所有部分一样进行调整。有没有办法将div元素与页面底部对齐，但仍然会受到边距属性和窗口重新调整大小的影响？

Answer 1

因为元素是固定位置，所以margin-top不会做太多。 您必须在内容元素上放置一个margin-bottom，以便它始终位于bottomContainer之上。

http://jsfiddle.net/s9t5x/

HTML

<div id="bottomContainer"></div>
<div id="content">
    <!-- rest of page content here -->
</div>

CSS

#bottomContainer {
    position: fixed;
    bottom: 0;
    width: 100%;
}

#content { 
    margin-bottom: 70px;
    counter-reset: cntr; 
}