Div Taking Screen Width & Height

I've been breaking my head the past two days figuring this out. Basically, i am creating a one page layout, where the first block takes the width and height of the screen and the s

Solution 1:

The trick is to add height: 100%; and margin: 0; to the body/html. Then it works wonders :).

HTML:

<divid="box1">HELLO HELLO THIS IS RED BOX, ARE YOU HEARING ME BLUE?</div><divid="box2">YES, RED, I'VE GOT YOU LOUD AND CLEAR. OVER. <div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#box1 {
    min-height: 100%;
    min-width: 100%;
    color: white;
    background-color: red;
}

#box2 {
    min-height: 100%;
    min-width: 100%;
    color: white;
    background-color: blue;
}

FIDDLE:

http://jsfiddle.net/ewzLM/1/