html设置页面窗口的高度,html – 如何使一个div 100％的窗口高度？

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％;.

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

}