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