2

我有两页包含页脚的 html。我想在两个页面中将页脚粘贴到页面底部。当页面没有垂直滚动但内容很多并且页面有滚动页脚站在我的内容上时，它可以正常工作。这是我的页面布局：

<body>
    <div id="container">
        <div id="header"> Header </div>
        <div id="menu"> Menu </div>        
        <div id="content"> Content </div>
        <div id="footer"> Footer </div>                
    </div>
</body>

这是我的CSS：

html, body
{
    width:100%;
    margin:0;
} 

#header, #menu, #content, #footer
{
    border:thin solid #000;
}

#content
{
    width:70%;
    margin: 0 auto;
    height:100%;
}

#footer
{
    position:absolute;
    bottom:0;
    width:100%;
    background-color:#06F;
}
4

3 回答 3

2

更改您的 CSS，例如；

#footer{
    width:100%;
    background-color:#06F;
}

这是一个有效的现场演示。

如果您希望页脚粘在底部，无论内容是什么，都可以尝试；

#footer{
    width:100%;
    background-color:#06F;
    bottom:0;
    position: fixed;
}

但是为您的页脚定义 aheight并在您的内容中添加相同数量的padding-bottom，否则某些文本可能会被页脚隐藏

这是一个有效的现场演示。

于 2012-09-08T15:02:14.230 回答
0

你可以试试这个

#footer {
   background-color: #0066FF;
   width: 100%;

}
于 2012-09-08T14:45:55.273 回答
0 
#footer {background-color: #0066FF;bottom: 0;position: absolute;width: 100%;bottom:0px;}
        body,html {height:100%}

通过这种方式，您将获得输出

于 2012-09-08T14:58:50.500 回答