Fixed Header Troubleshooting

by markallgood

HTML

<div class="content">
    <h1>A header</h1>
    <p>
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        Some content<br />
        End of content
    </p>
</div>
<div class="statusBarOverlay"></div>

CSS

.statusBarOverlay {
display: block;
position: fixed;
top: 0px;
left: 0px;
height: 20px;
width: 100%;
clear: both;
background-color: red;
}
.content {
    display:block;
    height:100%;
    width:100%;
    background-color:yellow;
}