Question

这是我的代码，当页面有更多内容时，我们滚动标题移动然后我尝试制作标题fixed的位置，但然后页脚不会坚持到底部：/

html,body
{
    margin: 0px;
    height:100%;
    min-height: 100%;
    top: 0;
    width: 100%;
    position: absolute;
}
header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
}
#container
{
    min-height: 85%;
    margin-top: 0.5%;
}
footer
{
    bottom: 0;
    background-color: #000000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position: relative;

}

Answer 1

将position:fixed设置为页脚

header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
    z-index:1000;
    position:fixed;
    /*.........^........*/  
    top:0;
}
footer{
    bottom: 0;
    background-color: #000000;
    z-index:1000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position:fixed;
    /*.........^........*/     
}

Fiddle Demo

Answer 2

footer
    {
       position: fixed; 
       z-index: 300; 
       bottom: 0px; 
       left: 0px;
       background-color: #000000;
       width: 100%;
       height: 6%;
       min-height: 6%;
    }

Answer 3

JsFiddle

header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
    position: fixed;
    top: 0;
}
footer
{
    bottom: 0;
    background-color: #000000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position: absolute;
    color: #FFFFFF;
}

我在这里提到了height: 1000px;以便你理解......你可以改变它......

Answer 4

试试这段代码：

<强> DEMO

header
{
    width: 100%;
    background-color: #000000;
    height: 8%;
    min-height: 8%;
    top: 0;
    position: fixed;
}
footer
{
    bottom: 0;
    background-color: #000000;
    width: 100%;
    height: 6%;
    min-height: 6%;
    position: absolute;

}

如何用css获得固定头？

4 个答案: