html - 页脚粘在底部问题

Question

我已经尝试过使这项工作的方法。主要是在尝试这个解决方案。

那对我没有用。我确实看到的问题是，在我的 body html css 中，我确实将高度设置为 100%，但它并没有真正将其设置为 100%。

这是我的页脚和正文 html 的 CSS 代码：

body {
font-family: 'AG-Regular', Helvetica, Arial, sans-serif;
margin: 0;
min-width: 1058px;
}

body, html {
height:100% !important;
}

#footerBox {
    width: 100%;
height:218px;
background-image:url(/img/footer-bg.png);
background-attachment:scroll;
background-repeat:repeat-x;
}

这是该网站的链接。

你应该看看它在哪里搞砸了。任何帮助将不胜感激。谢谢。

Answer 1

要使页眉和页脚保持不变，您需要使用 position: fixed on both。

示例代码

标题

#headerBox
{
    position: fixed;
    height: 200px;
    left: 0;
    top: 0;
    width: 100%;
}

主要的

#mainBox
{
    overflow: auto;
}

页脚

#footerBox
{
     postion: fixed;
     height: 218px;
     width: 100%;
     bottom: 0;
     left: 0;
}    

Answer 2

主要问题是-218px margin-bottom在#maincontent. 这样218px做是为了让你的页脚被向下推。我使用 将您的页脚设置为始终位于页面底部position: fixed，不确定这是否是您想要的。

#footerBox {
width: 100%;
height: 218px;
background-image: url(/img/footer-bg.png);
background-attachment: scroll;
background-repeat: repeat-x;
position: fixed;
bottom: 0;
}
#mainBox #mainContent {
background-color: white;
margin: 185px auto 218px;
overflow: auto;
padding: 30px 20px 20px;
width: 958px;
}