关于css：使div为浏览器窗口的100％高度

Making div 100% height of browser window

我的网站有两列，现在背景色以左列最后一段内容结尾(用于导航)。

我试过身高：100%，最小身高：100%，等等，好像不管用。这是CSS。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

.container {
width: 100%;
height:100%;
min-width: 960px;
background: #fbf6f0;
margin: 0 auto;
overflow: hidden;
}

#sidebar1 {
float: left;
position:absolute;
width: 20%;
height:100%;
min-width:220px;
background: none repeat scroll 0% 0% #007cb8;
z-index:9999;
}

相关讨论

使用视区高度-vh。

1
2
3

.container {
height: 100vh;
}

。

更新

请注意，在Safari iOS上使用VH可能存在问题。有关详细信息，请参阅此线程：chrome/safari没有填充100%高度的flex父级

设置车身高度

1
2
3
4
5
6
7

body,html{
height:100%;
}

div {
height:100%
}

1	overflow-y: auto;

这个CSS代码是为您的解决方案设计的。

默认情况下，div不填充整个窗口的原因是，如果因为它是父级，标记可能只扩展到需要的高度。将其添加到样式表的顶部(我喜欢按与标记中标记相似的顺序排列样式)：

1
2
3
4

html, body {
height:100%;
min-height:100%;
}

号

编辑：语法