页脚粘在底部问题

这并没有为我工作。我所看到的问题是，在我的身体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; 
}

Here is a link to the site。

你应该看看它在哪里搞砸了。任何帮助将是欣赏。谢谢。

来源

2013-03-27 Alex Kittavong

您是否试图将表单附加到底部的白色条上？ – David 2013-03-27 14:44:30

我试图完全隐藏底部的白色条纹。我只是希望页脚能够坚持到红色背景的底部。 – 2013-03-27 14:45:56

我刚刚更新了一点CSS。假设使用#mainBox时，我使用了#footerBox分类的#pushBox。那种东西固定了它，我仍然在底部有白色条纹。 – 2013-03-27 14:49:05

主要问题是-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; 
}

来源

2013-03-27 15:03:46 gaynorvader

谢谢，我现在就试试看。 – 2013-03-27 15:05:52

非常接近我正在寻找的东西，除非我不希望页脚浏览像这样的内容。不像导航菜单。 – 2013-03-27 15:09:53

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

示例代码

部首

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

来源

2013-03-27 15:11:56

页脚粘在底部问题

回答

相关问题