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 second block needs to be relative.

Example: http://www.shegy.nazwa.pl/themeforest/exit/normal/

<body>

<div id = "block1">
This is block 1 taking 100% width and height of screen.
</div>

<div id="block2">
Block 2 is relative to block 1
</div>

</body>

Answers


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

HTML:

<div id="box1">HELLO HELLO THIS IS RED BOX, ARE YOU HEARING ME BLUE?</div>
<div id="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/


Need Your Help

Javascript: How to simulate cursor with arrow key control for positioning DOM edits?

javascript jquery ide cursor editing

I'm building an in-browser IDE using Javascript. The code/widgets are stored in the document. I want control over the editing process so I am intercepting keystrokes and displaying a simulated cu...