Question

如何清除页脚栏下的空白区域？我已经删除了填充：页脚下15px，但它不起作用。

这里是site

CSS

#bottom-footer{ 
background: #909090;
text-transform: initial;
padding: 15px;
font-family: 'Arial', 'sans-serif';
color: #000000;
font-weight: 300;
}
#bottom-footer .site-info{
float: left;
font-size: 14px;
color: #000;
line-height: 1.8;
}
#bottom-footer .site-page{
float: right;
font-size: 14px;
line-height: 1.8;
color:#D00000;
}
#bottom-footer .copyright{
float: right;
padding-top:20px;
margin-left:600px;
}
#bottom-footer .logos{
float: left;
padding-top:20px;
margin-right:50px;
}

Answer 1

我假设你希望你的页脚粘在窗口的底部，除非内容高于窗口..我建议一些事情：

修复你的html，例如，你的所有内容都在你的标题标记内，这可能是个错误。
为了让您的页脚正常工作，我会使用css计算方法为您的内容提供最小高度100％减去标题+页脚的高度，因此（请注意一些重要的css规则）让这项工作）：

html，body，＃page，header {height：100％;}

#content {
  min-height: calc(100% - 285px); // 285 should be the height of your header + height of footer.
}

**请注意，calc方法需要完全按照上面的方式编写（空格和全部）才能工作.. browser support link

选项2

另一种方法可以实现这一目标：

html,body,#page, header { height:100%;}

#page { position:relative;}
#content { padding-bottom:130px;} /* FOOTER HEIGHT */
footer { position:absolute; bottom:0;}

如果您有任何疑问，请随意..

Answer 2

尝试为 #content

提供动态margin-bottom值

因此margin-bottom值与页脚

的高度相同

Answer 3

或者你可以使用它 http://ryanfait.com/html5-sticky-footer/

Keeps footer always to the bottom


* {
        margin: 0;
}
html, body {
        height: 100%;
}
.wrapper {
        min-height: 100%;
        margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */
}
footer, .push {
        height: 155px; /* '.push' must be the same height as 'footer' */
}

/*

删除页脚下的空白区域

3 个答案:

选项2