Website-Content mit Höhe des Browsers

[Integer]

Ich hab es glaub ich verstanden...

Habe mal etwas an Edit fiddle - JSFiddle gefummelt. Javascript und offsetHeight müsste hier Abhilfe schaffen.

<script type="text/javascript"> // ganz primitiv.
    window.onload = function()
    {
        random = getRandomInt(40, 100);
        document.getElementById('header').style.height = random;
        height = document.getElementById('header').offsetHeight;
        document.getElementById('content').style.marginTop = height - 50;
        alert(message);
    }
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }
</script>
<style type="text/css">
html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
header {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    top: 0;
}
#content {
    width: 80%;
    margin: 0 auto;
    padding: 60px 0;
}
footer {
    width: 100%;
    height: 60px;
    background: red;
    position: fixed;
    bottom: 0;
}
</style>
<header id="header"></header>
<div id="content">
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLOKITTY</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLODOLLY</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLO</p>
    <p>HELLOWEEN</p>
</div>
<footer></footer>

[Leuchtturmwärter]

Offtopic: Wenn du das JSFiddle erneut speicherst bekommst du eine neue URL, was du verlinkt hast hat nur die 60px gehardcodet.

@Topic: In meinem ersten Post zeige ich eine JavaScript-freie Lösung, die ich aus genannten Gründen vorziehen würde.
Die braucht halt leider ein paar HTML-Elemente, die nur zum stylen da sind, was natürlich etwas unschön ist.