使用固定标题使固定页脚工作 [英] Make fixed footer work with fixed header

问题描述

即使内容高度小于窗口，我也有脚本代码始终保持在最低限度。

I have code for footer to stay at bottom all the time even if content height smaller than window.

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/ 我知道它与margin-top有关：25像素;但如果我不放置该边距，则第一行内容隐藏在页脚后面，所以我想找到不涉及创建另一个间隔元素或仅留空顶部行以解决页眉高度的解决方案。

Now I need to add fixed header so I add below code and get scroll bar appears http://jsfiddle.net/7SZ56/4/ I know it has to do with margin-top:25px; but if I don't put that margin then first line of content hides behind footer, so I want to find solution that does not involve creating another spacer element or leaving top lines empty just to account for header height.

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

推荐答案

只需将

Just replace the

.numbers {
    margin-top:25px;
}

with

with

.numbers {
    padding-top:25px;
}

这篇关于使用固定标题使固定页脚工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！