html div 高度100,关于html：如何使div达到窗口高度的100％？

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

#sidebarBack {

background: rgba(20, 20, 20, .3);

position: fixed;

width: 250px;

height: 100%;

left: 0;

}

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

有什么方法可以做这样的事情，也许在relative或absolute位置？

这是一个快速提琴，仅供测试和解释：

JSFiddle

请原谅我，但我有点好奇-如果您能够滚动它，那会否破坏使它成为页面高度的想法？

您是要让侧边栏滚动到窗口之外还是停留在原处？ 并隐藏侧边栏下方的可滚动代码？

如果要滚动内容，我希望它滚动出窗口。 就像相对/绝对位置一样，就像Wordpress管理面板一样。

您可以使用新的且如此有用的我无法想象W3C这样长的vh CSS单元：

height:100vh;

如果我在顶部有一个菜单栏？

为什么每个人都不断建议使用vh ...如果您的导航栏位于顶部(固定)，则在移动设备上会遇到麻烦，因为浏览器导航栏会覆盖导航栏，您将无能为力接着就，随即。

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

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

本质上，上面的代码告诉#sidebarBack是其父代的100％高度。它的父级(我们假设)是body，因此您还需要在body上设置height: 100%;。但是，我们不能止步于此。 body从html继承高度，因此我们还需要在html上设置height: 100%;。我们可以在这里停止，因为html是从viewport继承其属性的，而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;

}

嗯，如果我添加此内容，它会使我的内容在水平和垂直方向上滚动，并且不会在相对/绝对位置为边栏提供100％的高度。

正确-很多人忘记了标签：html，body，form仍然是HTML元素，它们的默认高度没有100％-需要手动设置。

@NenaddvL我不确定您为什么选择此答案，因为它似乎无法完成您所要求的。除其他问题外，此答案还可以通过在#settings部分上设置position:fixed来有效地禁用所有滚动。我在下面添加了一个答案，我认为这将是对您的问题的更完整解决方案(请参阅此处：stackoverflow.com/a/13610461/416630)。

@Darren我已经注意到有多个问题被标记为该问题的重复，因此我在您的答案中添加了更多信息，并修订了该问题，以便将来更好地用作规范的问答。随意调整您的答案，以希望得到改善！

首先，告诉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：

内容比窗口短

内容比窗口长

如您所见，在两个示例中，我都将宽度设置保留在" #settings"部分中，从而显示了水平滚动按您的要求进行。

我对每个答案都有疑问。没有任何方法可以真正解决问题。除了检查的答案，如果我将他的固定位置替换为#settings上的绝对位置。但是这两种方式都不是一件好事，因为html正文100％给了我可滚动页面的高度，这就是我现在想要的。我想我会更改设计和位置，因为它绝对不会这样。也感谢您的帮助！

尝试以下

#sidebarBack {

background: rgba(20, 20, 20, .3);

position: fixed;

width: 250px;

top:0;

bottom:0;

left: 0;

}

嗯，不是我所需要的。它保持固定，只是由于top：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;

}

？

不会使侧边栏仍保持100％的高度:(