Question

I want to have a element on my website that I would like to be 100% height and width of the window, even after resizing. Width is easy:

#myElement {
    width: 100%
}

But the height can cause some issues. In my head, this makes sense:

window.onresize = function () {
    document.getElementById("myElement").style.height = window.innerHeight;
}

Is wrong with my logic here? Because this doesn’t always work as planned. Lets assume it’s not IE since (I don’t think) they support window.innerHeight.

Answer 1

You can achieve this with CSS, no javascript required.

div {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: red;
}

And the mark up:

<div>
    <p>Hello</p>
</div>

Example here: http://jsfiddle.net/CTGaP/