Html 将div高度扩展到文档高度

我试图在不使用Javascript的情况下将可扩展的边栏扩展到整个文档的高度。我开始编写一些代码来实现这一点，但是，两个div height都不会在视口大小之后扩展

这是我的问题所在的一个小代码笔。如您所见，如果向下滚动，两个边栏的高度都被设置为视口大小，这很奇怪，因为我将两个

body、html、#sidebars

都设置为

height:100%

有没有一种方法可以在不使用Javascript的情况下扩展到整个页面高度

谢谢。
如果您将html和正文设置为100%高度，它将只是窗口（其父窗口）大小的100%。例如，您需要设置特定高度（3000px）或200%，这将是windows高度的2倍。
默认情况下，codepen上的主体标记具有
边距。没有边际，一切看起来都很好。

但在将来，我建议您使用
overflow:hidden在主体上（结合
边距：0
），这将提供100%的信心，使您的所有内容始终位于视口内（无任何滚动）

已编辑：如果要为站点使用超过100%的视口高度，则需要使用
position:fixed在侧边栏上。
您只需将侧边栏高度设置为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;
}

此处演示

只需将CSS样式表中的“height”属性设置为“auto”，如下所示：

侧栏{
位置：绝对位置；
排名：0；
高度：自动；
宽度：100px；
颜色：绿色；
}

不要担心“侧边栏。右边”，因为你将在页面的右边看不到红色。当您向其添加一些内容或仅添加少量的

标记时，它将自动显示
 谢谢您的回答，但我希望文档的高度达到100%（而不是浏览器），即使它没有更多的内容。示例：我的左侧边栏的内容是500px，右侧边栏的高度应该是500px，即使它的内容只有200px。没有Javascript是否可能？然后将左侧边栏的位置设置为fixed
position:fixed