如何創建底部對齊的div元素

Question

我正在嘗試創建一些始終位於頁面底部的元素。目前我正在使用這個CSS來實現它。

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

不幸的是，當縮小頁面時，這些元素覆蓋頁面的其他部分，而不是像其他所有部分一樣調整。有沒有辦法將div元素與頁面底部對齊，但是仍然會受到margin屬性和窗口大小的影響？

Answer 1

因爲元素是固定位置，所以您的margin-top不會做太多。 您必須在內容元素上放置一個邊緣底部，以便始終保持在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; 
}