高度：100% 背景侧边栏不起作用答案

【问题标题】：height: 100% background sidebar doesn't work高度：100% 背景侧边栏不起作用
【发布时间】：2016-05-11 03:07:35
【问题描述】：

如何添加背景高度：100% 放在一边？

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

如何修复侧边栏（旁边）？

【问题讨论】：

【解决方案1】：

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

对于您的示例，您只需将“height: 100vh”添加到您的 css。

【讨论】：

OP 可能希望侧边栏成为页面的高度，该高度可能会根据内容以及可能的条件（例如最小高度）而有所不同。您在此处将侧边栏设置为设定的高度。如果用户必须滚动五次才能查看页面的所有内容，那么当他们到达页面底部时，侧边栏早就消失了。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

高度是基于父元素的相对值，但是由于Window没有默认高度，所以不能使用元素的相对高度。

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

【讨论】：