HTML div：垂直对齐不会粘滞

Question

Having looked through days of possible solutions, I would like to ask now of a weird issue that I cannot seem to fix.

The problem is that I cannot get the two divs below to correctly align so that they do NOT overlap when the page is resized. Currently when the page is resized, the content div either expands to be far away from the header div or once it reaches a certain size, goes underneath the header never to be seen again. I am a relatively new to HTML5/CSS3 so I am certain that the error is something minimal that I have not thought to do, although I have tried the majority (if not all) of the solutions previously posed.

Currently I have two divs that look like this:

<div id="header" class="mm-fixed-top">
    <a href="#menu"><img src="images/mmenu.png" id="burg"></a>
    <img id="logo" src="images/cpit_landscape_white.png">
</div>

<div id="content">
    <h1>Lorem Ipsum</h1>
    <span>Sed ut perspiciatis unde omnis iste natus error sit...</span>
</div>

Currently with the following CSS link to these divs:

    #header {
    height:10%;
    width: 100%;
    background: #0193CF url(../images/banner_decal.png) repeat-x 0 0;
    padding: 7px;
    color: #FFF;
    display: block;
}

#content {
    font-size:1em/150%;
    font-family: Arial, Helvetica, sans-serif;
    display:block;
    margin:8px;
    background:#f8f8f8;
    padding: 2%;
    margin-top: 14%;
}

The mm classes are in relation to the mmenu jQuery plugin.

*Live edition of issue: http://sch242.comeze.com/mobile.php

Answer 1

Vertical percentages are a bit of a mine field and I'd advise against them in most cases. I'd advise doing something like this:

#header {height: 5em;}
#content {margin-top: 8em;}