將div的下邊緣鎖定到視口的純css方法

Question

我有兩個容器div，需要將其底邊從視口底部鎖定x個像素。我需要與使用位置absolute|fixed相同的結果 - 但我需要將它們保留爲position: relative，以便它們可以正確浮動並將其自己定位到DOM的其餘部分。

我只能找到基於JavaScript的解決方案，我真的更喜歡純CSS的東西。希望有人知道我沒有的解決方案。

如果可能的話，需要支持IE7 +。

Answer 1

如果您需要，IE7.js支持修復定位。

http://ie7-js.googlecode.com/svn/test/index.html

Answer 2

這裏是如何完成你想和你的指導方針做一個例子。

http://jsfiddle.net/cornelas/38WqN/

<div id="footer"> 
    <div class="footer-right"> 
    </div> 
    <div class="footer-left"> 
    </div> 

</div> 

CSS

#footer { 
background: #666; 
position: fixed; 
bottom: 0; 
width: 100%; 
height: 20%; 
} 
.footer-right { 
background: #ccc; 
position: relative; 
height: 100%; 
width: 40%; 
display: inline-block; 
} 
.footer-left { 
background: #ccc; 
position: relative; 
height: 100%; 
width: 40%; 
display: inline-block; 
}