如何制作100%窗口高度的div？

Question

我只想要一个侧边栏,它将是窗口高度的100%,但除此之外没有任何作用:

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

我不想拥有position: fixed,因为我有可水平滚动的内容,所以一个固定的部分将保留,好,固定.

有没有办法做这样的事情,也许还有relative或者有absolute位置？

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

Answer 1

你可以使用新的,非常有用的 - 我无法想象的W3C这么长的vhCSS单元:

height:100vh;

Answer 2

tl; dr - 添加html, body {height:100%;}到您的CSS.

CSS中的百分比值是从已声明高度的某个祖先继承的.在您的情况下,您需要告诉您的侧边栏的所有父母是100%身高.我假设那#sidebarBack是一个直接的孩子body.

基本上,上面的代码告诉#sidebarBack它的父级是100%的高度.它的父母(我们假设)是body,所以你也需要坚持height: 100%;下去body.但是,我们不能止步于此; body继承了高度html,所以我们还需要设置height: 100%;上html.我们可以在这里停下来,因为html它继承了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;
}

Answer 3

首先,告诉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"部分保留了宽度设置,从而显示水平滚动按您的要求工作.