如何使 div 100% 的窗口高度？

Question

我只想有一个 100% 为窗口高度的侧边栏，但除此之外没有任何效果：

#sidebarBack {
background: rgba(20, 20, 20, .3);
position: fixed;
width: 250px;
height: 100%;
left: 0;
}

我不想拥有position: fixed，因为我有可水平滚动的内容，所以固定部分会保留，嗯，固定。

有没有办法做这样的事情，也许是relative或absolute的位置？

这里有一个快速的 Fiddle 仅用于测试和解释： JSFiddle

Answer 1

您可以使用新的非常有用的-I-can't-imagine-what-took-W3C-so-long vh CSS 单元：

height:100vh;

Answer 2

tl;dr - 将 html, body {height:100%;} 添加到您的 CSS。

---

CSS 中的百分比值是从某个已经声明了高度的祖先继承而来的。在您的情况下，您需要告诉侧边栏的所有父母都是 100% 的高度。我假设#sidebarBack 是body 的直接子代。

基本上，您上面的代码告诉#sidebarBack 是其父级的100% 高度。它的父级（我们假设）是body，因此您还需要在body 上设置height: 100%;。然而，我们不能止步于此； body 继承自 html 的高度，因此我们还需要在html 上设置height: 100%;。我们可以在这里停下来，因为html 继承了viewport 的属性，viewport 已经声明了高度为100%。

这也意味着如果您最终将#sidebar 放入另一个div，那么div 也需要height:100%;。

这是一个Updated JSFiddle。

将您的 CSS 更改为：

html, body {
    height:100%;
}

#sidebar {
    background: rgba(20, 20, 20, .3);
    width: 100px;
    height: 100%;
    left: 0;
    float:left;
}

section#settings {
    width:80%;   
    float:left;
    margin-left:100px;
    position:fixed;
}

Answer 3

首先，告诉 body 元素填充窗口，而不是缩小到内容的大小：

body { position: absolute; min-height: 100%; }

通过使用min-height 而不是height，当内容长于窗口时，主体将被允许扩展超出窗口的高度（即，这允许在需要时进行垂直滚动）。

现在，将“#sidebar”设置为position:absolute，并使用top:0; bottom:0; 强制它填充父元素的垂直空间：

#sidebar {
    position: absolute;
    top:0; bottom:0;
    left: 0;
    width: 100px;
    background: rgba(20, 20, 20, .3);
}

这里有几个 jsFiddles：

• with content shorter than the window
• with content longer than the window

如您所见，在这两个示例中，我都在“#settings”部分保留了您的宽度设置，从而表明水平滚动可以按照您的要求进行。

Answer 4

试试下面的

#sidebarBack {
 background: rgba(20, 20, 20, .3);
 position: fixed;
 width: 250px;
 top:0;
 bottom:0;
 left: 0;
}

Answer 5

试试这个 -

html,body{height:100%;}
#sidebar {
background: rgba(20, 20, 20, .3);
/*position: fixed;*/
width: 100px;
height: 100%;
left: 0;
float:left;
}


section#settings {
width: 62%;
height: auto;
display: inline-block;
position: relative;
margin-left: 100px;
float:left;
}

​