position - 如何创建底部对齐的 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; 
}