Question

我正在尝试在没有Javascript的情况下将可扩展的侧边栏设置为完整的文档高度。我开始编写一些代码来实现这一点，但是，在视口大小之后，div高度都没有扩展。

这是我的问题http://codepen.io/anon/pen/bpAzo的一小部分。如您所见，如果向下滚动，两个侧边栏的高度只会设置为视口大小，这很奇怪，因为我将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;
}

DEMO HERE

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

Answer 2

如果将html和body设置为100％高度，它将只是窗口（它的父级）大小的100％。例如，您需要设置特定高度（3000像素）或200％，这将是窗口高度的2倍。

Answer 3

默认情况下，codepen上的正文标记为margin。没有保证金看起来都不错。 http://codepen.io/suez/pen/zJhne

但是在将来，我会建议你在身体上使用overflow: hidden;（与margin: 0结合使用），这样可以100％确信所有内容总是在视口内（没有任何内容）滚动）。

已编辑：如果您要为自己的网站使用超过100％的视口高度，则需要在侧边栏上使用position: fixed;。

Answer 4

只需制作＆＃34;身高＆＃34; CSS样式表中的属性为＆＃34; auto＆＃34;，如下所示，

sidebar { position: absolute; top: 0; height:auto; width: 100px; color: green; }

不要担心＆＃34; sidebar.right＆＃34; ，因为你会看到页面右侧没有红色。它会在您向其添加一些内容时自动显示，或者只添加几个<br />标记。

将div高度扩展到文档高度

4 个答案: