html - 高度：100% 未到达包含元素的底部

Question

我曾尝试查看类似的问题，但似乎找不到解决方案。如果有人可以在这里看看，看看为什么侧边栏没有延伸到内容 div 的底部，我将不胜感激：http ://robert.io/posts/1.html

我绝对不想为此使用 Javascript。感谢您的帮助！

Answer 1

快速修复是添加这些：

body { background-color: #2C3B63; }
#content { background-color: white; }

Answer 2

进行以下 CSS 更改：

<style type="text/css">
#page {
    display: table;
    height: 100%;
}

#sidebar, #content {
    display: table-cell;
    float: none;
    clear: none;
}

#sidebar {
    vertical-align: top;
}
</style>

在 Chrome 26 (OS X) 上测试

Answer 3

您可以通过更改 CSS 中的一行代码来解决此问题：position: relative

#sidebar {
    position: fixed;
}

但是随着您的设置方式，它会导致您的内容位于侧边栏后面。所以只需调整你的margin-leftfor #content。我摆弄着它，看了看大约在 325 左右（如果我没记错的话）。