0

基本上我试图让我的页眉固定在页面的顶部，同时我还需要我的页脚必须在页面的底部，无论内容是少还是多。但我不希望我的页脚位置修复。因此，当有大量数据页脚移动时。如果我不修复标题，我现在使用的代码会很好用。

<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;
}

这是代码，我还没有修复我的标题，但我需要一些帮助来修复它。

4

3 回答 3

2

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

http://www.cssstickyfooter.com/

于 2013-04-24T12:23:10.727 回答
0

如果我理解你的话，在我看来你是在寻找一个粘性标题。尝试用以下替换您的两条规则 

     #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;
     }

这是更改#content高度影响页脚位置但不影响页眉的演示。

于 2013-04-24T12:30:28.007 回答
-4

用这个

position:fixed;

对于您的标题。

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

于 2013-04-24T12:21:50.063 回答