Размещение двух блоков div внизу

Question

То, что я пытаюсь сделать, заключается в размещении двух блоков div, CV и контакта в нижней части страницы, и, когда они зависают над ним, они будут охватывать всю страницу, как они это делают государство. Я попытался переместить их с помощью свойства margin-top, но они не вели себя правильно, когда я навис над ними. Кроме того, я не хочу, чтобы полосы прокрутки были размером экрана пользователя, поля всегда отображаются в углу страницы. Мое решение действительно для этого, или мне нужен javascript для этого? Вот мой jsfiddle:

http://jsfiddle.net/cR9NL/

какие позиции следует использовать в этой ситуации: absolute или relative?

Answer 1

HTML код все та же, ниже мой CSS для вас и демо:

CSS

html, body { height: 100%; max-width: 100%; margin: 0; padding: 0; } 

#container { 
    position: relative; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#container div { 
    height: 25%; 
    width: 15%; 
    text-align: center; 
} 

#container>div:hover { 
    height: 100%; 
    width: 100%; 
    text-align: center; 
    position: absolute; 
    z-index: 5; 
} 

#upper-left{ 
    background: #77cc00; 
    float: left; 
    border: solid 3px #99ee22; 
} 


#upper-right{ 
    background: #ffdd22; 
    float: right; 
    border: solid 3px #ffff44; 
} 
#lower-right { 
    position: absolute; 
    bottom:0; 
    right: 0; 
    background: #55bbff; 
    border: solid 3px #77ddff; 
} 
#lower-left{ 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    background: #ff5522; 
    border: solid 3px #ff7744; 
} 
#container>div>p { 
    font-family: Tahoma; 
    margin: 28% auto; 
    font-weight: 900; 
    color: white; 
    font-size: 30px; 
} 

D EMO

http://jsfiddle.net/bartekbielawa/cR9NL/2/

Answer 2

Сделать нижние и нижние правые разделители абсолютными, с 0 для нижнего значения и 0 для левого и правого значений соответственно.

Fiddle :):

position:absolute; 
bottom:0; 
right:0; 

http://jsfiddle.net/cR9NL/1/