html – 如何使一个div 100％的窗口高度？

概述我只想有一个侧边栏将是窗口高度的100％,但除此之外没有任何作用： #sidebarBack {background: rgba(20, 20, 20, .3);position: fixed;width: 250px;height: 100%;left: 0;} 我不想有位置：固定,因为我有水平可滚动的内容,所以一个固定的部分将保持,很好,固定. 有没有办法做这样的事情,也许有相对或 我只想有一个侧边栏将是窗口高度的100％,但除此之外没有任何作用：

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

我不想有位置：固定,因为我有水平可滚动的内容,所以一个固定的部分将保持,很好,固定.

有没有办法做这样的事情,也许有相对或绝对的地位？

这是一个快速的小提琴只是为了测试和解释：
JSFiddle

解决方法 tl; dr – 添加HTML,body {height：100％;}到你的CSS.

CSS中的百分比值从已经声明高度的一些祖先继承.在你的情况下,你需要告诉你的边栏的所有父母的身高是100％.我假设#sIDebarBack是身体的直接孩子.

本质上来说,您的代码正在告诉#sIDebarBack为其父级的100％高度.它的父(我们假设)是body,所以你需要设置height：100％;身体也好.然而,我们不能停下来身体从HTML继承高度,所以我们还需要设置height：100％;在HTML上.我们可以在这里停下来,因为HTML从vIEwport中继承了它的属性,它已经声明了100％的高度.

这也意味着如果最后将#sIDebar放在另一个div中,那么该div还需要height：100％;.

这是一个Updated JSFiddle.

将您的CSS更改为：

HTML,body {    height:100%;}#sIDebar {    background: rgba(20,.3);    wIDth: 100px;    height: 100%;    left: 0;    float:left;}section#settings {    wIDth:80%;       float:left;    margin-left:100px;    position:fixed;}

总结

以上是内存溢出为你收集整理的html – 如何使一个div 100％的窗口高度？全部内容，希望文章能够帮你解决html – 如何使一个div 100％的窗口高度？所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。