高度：100％背景侧栏不起作用

Question

如何增加背景高度：预留100％？

aside,
.side-nav {
    width: 250px;
    float: left;
    margin-right: 15px;
    background-color: #2b2b2b;
}

如何固定边栏（一边）？

Answer 1

使用CSS3，您实际上可以使用“ vh”名称（基于视口高度）。

对于您的示例，您只需在CSS中添加“ height：100vh”。

Answer 2

我创建了一个小例子。 请查看下面的jsfiddle链接。

<https://jsfiddle.net/whfukm5p/>

Answer 3

我认为您需要的是固定而不是浮动的导航。

aside, .side-nav { width: 250px; margin-right: 15px; background-color: #2b2b2b; position: fixed; left: 0; top: 0; bottom: 0; overflow: auto; }

高度是基于父元素的相对值，但是由于Window没有默认的高度，因此无法使用元素的相对高度。

如果您坚持使用相对高度，则需要通过javascript设置它或给它一个默认值。