html - 将 div 高度扩展到文档高度

Question

我正在尝试在没有 Javascript 的情况下将可扩展的侧边栏扩展到整个文档的高度。我开始编写一些代码来实现这一点，但是，两个 div 高度都没有超出视口(viewport)大小。

这是我的问题的小代码笔 http://codepen.io/anon/pen/bpAzo .如您所见，如果向下滚动，两个侧边栏的高度都设置为视口(viewport)大小，这很奇怪，因为我将 body, html, #sidebars 都设置为 height: 100%;.

有没有办法在不使用 Javascript 的情况下扩展到整页高度？

谢谢。

Answer 1

您只需将侧边栏高度设置为 100%，这样它就相当于当前浏览器大小的 100%。删除侧边栏的高度并删除 html 和正文代码。

#sidebar {
    position: absolute;
    top: 0;
    width: 100px;
    color: green;
    color: #FFFFFF;
}
.left {
    background-color: blue;
    left: 0;
}
.right {
    background-color: red;
    right: 0;
}

此处演示

http://codepen.io/anon/pen/jfEhH