如何使div达到窗口高度的100％？

Question

我只想有一个侧边栏，该边栏将是窗口高度的100％，但除此之外没有任何作用：

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

我不想拥有position: fixed，因为我具有水平可滚动的内容，所以固定的部分将保持不变。

有没有办法做这样的事情，也许有relative或absolute立场？

Answer 1

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

CSS中的百分比值是从某些已经声明了height的祖先继承而来的。在您的情况下，您需要告知边栏的所有父母都必须保持100％的高度。我假设这#sidebarBack是的直接子级body。

本质上，您上面的代码告诉#sidebarBack它是其父代的100％高度。其母公司（我们假设）是 body ，所以你需要设置height: 100%;上body也是如此。但是，我们不能止步于此。body从继承的高度 html ，所以我们 还 需要设置height: 100%;上html。我们可以在这里停止，因为html从继承了其属性viewport，该属性的声明高度已经为100%。

这也意味着，如果最终将#sidebar另一个内部放入div，则div也需要这样做height:100%;。

这是 更新的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;
}