Question

即使内容高度小于窗口，我也有足够的页脚代码保持在底部。

<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有关：25px;但是，如果我没有放置边距，那么第一行内容隐藏在页脚后面，所以我想找到不涉及创建另一个spacer元素的解决方案，或者将顶行留空以仅考虑标题高度。

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

Answer 1

只需替换

即可

.numbers {
    margin-top:25px;
}

与

.numbers {
    padding-top:25px;
}

Fiddle Demo

Answer 2

如同一个小小的啧啧和演示：

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

演示：try it

P.s：代码不是我的，它本身就属于编码员。

固定页脚使固定页脚工作

2 个答案:

Fiddle Demo