Pure css метод блокировки нижнего края div на viewport

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