html - 页脚下方的白色间隙

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

内容包装器:

#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 标签的底部。