CSS3有一个很强大的calc属性可以供我们通过动态计算的方法来设置元素的宽高。

但是,在使用这个属性的时候,需要有一些注意的地方。

看下面这个例子:

1
2
3
4
5
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.title {
width: 100%;
height: 100px;
background-color: blue;
}
.content {
width: 100%;
/* 设置内容高度为视区的总高度减去footer和header的高度,使用CSS3的calc属性 */
height: calc(100% - 150px);
background-color: #aaaaaa;
}
.footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
background-color: black;
}

表面上看这段代码没有问题,但是,我们在使用的时候就会发现,高度没能设置成功。因为高度为100%的时候,是相对于父级容器的高度来的,所以,还需要给父级容器设置高度才行。

所以,更改后的CSS如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/* 父级容器设置高度为视区高度,vh表示view height,100vh表示高度为100% */
.container {
color: #ffffff;
height: 100vh;
}
.title {
width: 100%;
height: 100px;
background-color: blue;
}
.content {
width: 100%;
/* 设置内容高度为视区的总高度减去footer和header的高度,使用CSS3的calc属性 */
height: calc(100% - 150px);
background-color: #aaaaaa;
}
.footer {
position: fixed;
width: 100%;
height: 50px;
bottom: 0;
background-color: black;
}

这样,我们的高度设置就可以了。