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