HTML divs：垂直对齐不会粘住

在浏览了几天可能的解决方案之后，我现在想问一个我似乎无法解决的奇怪问题

问题是我无法使下面的两个div正确对齐，以便在调整页面大小时它们不会重叠。当前，当页面调整大小时，content div要么扩展到远离header div的地方，要么一旦达到某个大小，就会进入header下方，再也看不到它。我是HTML5/CSS3的新手，因此我确信错误是我没有想到要做的最小的事情，尽管我已经尝试了之前提出的大多数（如果不是全部）解决方案

目前我有两个div看起来像这样：

<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>

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

mm类与mmenu jQuery插件相关

---

*本期实时版：

垂直百分比有点像雷区，我建议在大多数情况下不要使用它们。我建议你这样做：

<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>

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

---

嗯，我从来没有拼凑出你可以用它们来定尺寸。你知道的越多！非常感谢。但是，header div中图像的大小现在没有调整。有没有其他方法可以让它们重新调整大小？嗯，它们仍然在为我调整Chrome的大小。您正在使用什么浏览器？目前是Firefox和Chrome的最新标准版本；应该不会有任何问题，但唉，这是一个挑剔的野兽。