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>

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>

回答1:

Just replace the

.numbers {
    margin-top:25px;
}

with

.numbers {
    padding-top:25px;
}

Fiddle Demo

回答2:

How about a little tut and demo together:

Tut: Sticky Header and Footer using CSS

    <!-- BEGIN: Sticky Header -->
<div id="header_container">
    <div id="header">
        Header Content
    </div>
</div>
<!-- END: Sticky Header -->

<!-- BEGIN: Page Content -->
<div id="container">
    <div id="content">

        <br /><br />
        ...
    </div>
</div>
<!-- END: Page Content -->

<!-- BEGIN: Sticky Footer -->
<div id="footer_container">
    <div id="footer">
        Footer Content
    </div>
</div>
<!-- END: Sticky Footer -->

Demo: try it

P.s:The code is not mine, it belongs to the coder himself.

来源：https://stackoverflow.com/questions/21617198/make-fixed-footer-work-with-fixed-header

标签

html

css

header

footer