在底部放置两个div块

Question

What I am trying to do is, placing the two div blocks, CV and Contact at the bottom of the page, and when hovered over it, they would cover the whole page like they do at this state. I tried to move them with margin-top property, but they didn't behave proper when i hovered on them. Also, I want no scroll bars that is whatever user's screen size is, the boxes always appear in corner of page. Is my solution is valid for this, or do i need some javascript to do these? Here is my jsfiddle:

http://jsfiddle.net/cR9NL/

what positions should I use in this situation: absolute or relative ?

Answer 1

Make the lower-left and lower-right divs positioned absolute, with 0 for the bottom value and 0 for the left and right values, respectively.

Fiddle :) :

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

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

Answer 2

html code is still the same, below is my css for you and demo:

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

DEMO

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