使固定页脚与固定页眉一起使用

我有代码让页脚始终保持在底部，即使内容高度小于窗口。

http://jsfiddle.net/7SZ56/1/ http://jsfiddle.net/7SZ56/1/

<style>
 * {
        margin:0;
        padding:0;  
     }   


    html, body {
        height:100%;
    }

    .wrapper_element {
        min-height:100%;
        height:auto !important;
        height:100%;
        margin: 0 auto -50px auto;
    }

    .footer_spacer, .footer {
        height:50px; 
    }

</style>

<div class="wrapper_element">
    Page content goes here
    <div class="footer_spacer"></div>
</div>

<div class="footer">Footer</div>

现在我需要添加固定标题，因此我添加以下代码并出现滚动条http://jsfiddle.net/7SZ56/4/ http://jsfiddle.net/7SZ56/4/我知道这与 margin-top:25px; 有关但如果我不设置该边距，那么第一行内容就会隐藏在页脚后面，所以我想找到不涉及创建另一个间隔元素或将顶行留空以说明标题高度的解决方案。

.header {
    width:100%;
    height:25px;
    position:fixed;
    top:0;
}

.numbers {
    margin-top:25px;
}

<div class="wrapper_element">

   <div class="header">Header</div>    

   <div class="numbers">
        1<br/>
        2<br/>
        3<br/>
        4<br/>
        5<br/>
        6<br/>
        7<br/>
        8<br/>
        9<br/>
        10<br/>
   </div>
   <div class="footer_spacer"></div>
</div>

只需更换

.numbers {
    margin-top:25px;
}

with

.numbers {
    padding-top:25px;
}

小提琴演示 http://jsfiddle.net/7SZ56/5/