Html 我怎样才能使div达到100%的窗高？

我只想有一个边栏，将是100%的窗口高度，但没有任何工作，除了这个：

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

我不希望有

位置：fixed

，因为我有水平滚动的内容，所以一个固定的部分仍然是固定的

有没有办法做到这一点，可能是用

相对的
或
绝对的
位置

这里有一个快速的提琴，只是为了测试和解释：
tl；dr-将
html，body{height:100%；}
添加到CSS中


CSS中的百分比值是从已声明高度的某个祖先继承的。在你的情况下，你需要告诉你的侧边栏的所有家长要100%高。我假设
#sidebarBack
是
body
的直系后代

基本上，您上面的代码告诉
#sidebarBack
要达到其父级的100%高度。它的父级（我们假设）是
body，因此您需要设置
高度：100%也在
主体上。然而，我们不能就此止步
body
从
html继承高度，所以我们还需要设置
高度：100%在
html
上。我们可以到此为止，因为
html
从
viewport
继承了它的属性，viewport已经声明了
100%

这也意味着如果你最后把
#边栏
放在另一个
div
中，那么
div
也需要
高度：100%

这是一个

将您的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;
}

试试下面的方法

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

试试这个-

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;
}

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

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

通过使用
min height
而不是
height
，当内容比窗口长时，主体可以扩展到窗口高度以外（即，在需要时允许垂直滚动）

现在，将“#侧边栏”设置为
位置：绝对
，并使用
top:0；底部：0强制填充父元素的垂直空间：

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

以下是几个JSFIDDLE：





正如您将看到的，在这两个示例中，我在“#设置”部分保留了您的宽度设置，从而表明水平滚动可以按照您的要求工作。
您可以使用新的非常有用的-I-can-imagine-what-take-W3C-so-long CSS单元：

height:100vh;

原谅我，但我有点好奇-如果你能滚动它，这不是击败了将其作为页面高度的想法吗？你想让侧边栏滚动到窗外，还是留在原处？并将可滚动的代码隐藏在侧边栏下？如果正在滚动内容，我希望它能滚动出窗口。像相对/绝对位置。。。就像Wordpress管理面板一样。。。他们有相似的东西…嗯，不完全是我需要的。由于顶部：0，它保持固定，只是将其拉过收割台；嗯，如果我加上它，我的内容可以水平和垂直滚动，并且不会在相对/绝对位置给边栏100%的高度。对-很多人忘记了标签：html，body，表单仍然是默认高度不为100%的HTML元素，它们需要手动设置。@NenaddvL我不确定您为什么选择此答案，因为它似乎无法满足您的要求。在其他问题中，此答案通过在
#settings
部分设置
位置：fixed
有效地禁用了所有滚动。我在下面添加了一个答案，我认为这将是解决您问题的一个更完整的解决方案（请参见此处：）@Darren我注意到不止一个问题被标记为此问题的副本，因此我在您的答案中添加了更多信息，并对该问题进行了修改，以便将来更好地作为标准问答。请随意调整您的答案，因为您希望改进它！不会使边栏保持100%的高度：（我对每一个答案都有疑问。没有一个能真正解决这个问题。除了检查答案，如果我在#设置上替换他的固定到绝对位置。但是这两种方式都不好，因为html，body 100%给了我可滚动的页面高度，这就是我现在想要的。我想我会改变设计和位置，因为它定义了y不是这样的。也谢谢你的帮助！如果我在顶部有一个菜单栏？为什么每个人都建议使用
vh
…如果你在顶部有一个导航栏（固定），你会在移动设备上面临痛苦，因为它会被浏览器的导航栏重叠，你不会用它做任何事情。