Question

On my site here，我们在不同的城镇使用相同的CSS，但没有内容的non populated/new towns e.g. here页脚上升并在下面留下一个大的白色间隙。

我尝试了sticky footer method，但没有效果。

这是页脚CSS：

#footer-wrapper, #push {
    height: 100px; /* .push must be the same height as .footer */
        overflow:hidden;
}
#footer-wrapper {clear:both;width:100%;border-top:1px solid #323232;padding:20px 0 0;
background: #33383c;
background: #3F4952 url("/images/bg.jpg") repeat;
}

Contentwrapper：

#main-content {
margin: 0 5% -100px;
min-width:960px;
max-width:1137px;
overflow: hidden;
}

我想知道右/左导航相等列CSS是否影响它，例如：

.right-nav {
float: right;
width: 29.4%;
border-left: 1px solid #Dddddd;
padding-top:2em;
padding-bottom:10040px;
margin-bottom:-10000px;
}

任何想法都会很棒。

Answer 1

将min-height放在#main-content div上，即使#main-content div没有内容，也可以按下页脚。

#main-content {
  margin: 0 5% -100px;
  min-width:960px;
  max-width:1137px;
  min-height:600px;
  overflow: hidden;
}

或

将position:absolute;添加到#footer-wrapper div，将其拉到100％高度body标记的底部。

Answer 2

我通过将height:100%;添加到#main-content修复了此问题。

不知道为什么我之前没有接受，但感谢回复。

Answer 3

我在min-height:100%上使用#main-content修正了它。

Height:100%会在填充的页面上切断页面的末尾，而min-height:100%同时适用于这两个页面。

页脚下方的白色间隙

3 个答案: