css - 设置背景以运行到与页面高度无关的页面底部

Question

我希望灰色背景一直持续到当前窗口的高度。我尝试将高度设置为#default-wrapper-body 的 100%，但这似乎没有任何作用。

在这里看到它：http ://www.zorgbeurs.nl ，这里更突出：http ://www.zorgbeurs.nl/aanmelden

我还添加了一个图像，右侧框中的区域应该在所有页面上运行到页面底部，而不仅仅是主页。

Answer 1

发生这种情况是因为浏览器由于某种原因无法检测到页脚的高度，而且您没有对所有元素使用包装器，快速解决方法是将以下 CSS 添加到您的样式表中：

#footer_footnote_wrapper {
    height: 80px;
    border-bottom: 1px solid #DCDCDC;
}
html, body {background:#f3f3f3;}

Answer 2

html, body, form, #default-wrapper-body { height: 100%; }

......成功了，见这里：http ://codepen.io/zitrusfrisch/pen/ouEdI

最好将表单移动到 #default-wrapper-body 内，以防止所有表单被拉伸到 100% 高度。

Answer 3

我认为 cookiebar div 导致底部出现白色条纹，它有 background:none; 当它可见时，背景看起来很好，一直到底部。