Question

Basiclly我尝试在页面顶部修复标题，同时我还需要我的页脚必须位于页面底部，因为内容越来越少。但我不希望我的页脚位置修复。因此，当数据页脚移动时会有大量的移动。我现在正在使用的代码工作得非常好，如果我不修复我的标题。

<body>
<div id="header">header</div>
<div id="content">content</div>
<div id="footer">footer</div>
</body>

CSS就是

    *{ margin:0px; padding:0px;}
    html{
    margin:0;
    padding:0;
    height:100%;
    }
    body {
    min-height:100%;
    position:relative;
    }
    #header {
    padding:10px;
    background:#5ee;
    }
#content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
#footer {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
    background:#ee5;
}

这是代码，我没有在此修复我的标题，但我需要一些帮助才能解决。

Answer 1

您正在寻找的是特别称为“粘性页脚”。

http://www.cssstickyfooter.com/

Answer 2

如果我理解你的话，在我看来你是在追求一个粘性标题。尝试使用以下

替换您的两个规则

     #header{
        background: none repeat scroll 0 0 #55EEEE;
        padding: 10px;
        position: fixed;
        top: 0;
        width: 100%;
     }
     #content{
        background: none repeat scroll 0 0 #FF0000;
        color: #FFFFFF;
        height: 2000px;
        margin: 40px 0 0;
        padding: 10px 10px 80px;
     }

Here is the demo更改#content高度会影响页脚位置但不影响页眉。

Answer 3

使用此

position:fixed;

标题。

至于页脚 - 使用此http://ryanfait.com/sticky-footer/

顶部的标题始终位于底部

3 个答案: