页脚坚持底部问题

Question

我已经尝试过这项工作。主要是尝试this solution。

这对我来说没有用。我看到的问题是，在我的身体html css中，我确实将高度设置为100％，但它并没有真正将其设置为100％。

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

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

Here is a link to the site

你应该看到它搞砸了。任何帮助都会很有意义。感谢。

Answer 1

要使页眉和页脚粘住，您需要使用位置：固定在两者上。

示例代码

标题

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