探讨使得div占满父级元素余下高度的几种方式

发表于   |   分类于   |  

上下两个div，上面的div固定高度，下面的div自动地撑满父元素的余下高度，这是在做网页布局时经常用到的一种，最近公司的几个项目，我也经常遇到这种场景。因此，打算写一篇文章做个总结，以便在日后的工作中，使用起来更得心应手。

由于自己一直在用一种方式实现，所以此文的另一个目的，是想尽量多的罗列其实现方法，找到最适合的那一个。

先抛出实现效果图如下。

实现效果图

一、calc实现

calc就是英文单词calculate(计算)的缩写，是CSS3的一个新增功能，我们可以使用可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。说到这里，我们应该大概能明白calc实现上述效果的方式了，关于calc具体的使用方式，这里不再详述，如果想了解可以看这里。

我们先来看HTML和CSS代码，实现链接

html:

1
2
3
4
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.container {
  width: 240px;
  height: 400px;
  padding: 10px;
  margin: 0 auto;
  background: #f00;
}
.container > div {
  width: 100%;
}
.one {
  height: 100px;
  background: #000;
}
.two {
  height: calc(100% - 100px);
  background: #ff0;
}

二、绝对定位实现

绝对定位实现算是一种比较笨拙的实现方式，但是也绝对实用，其实现思路也和calc基本一致，令第二个div的左边缘、右边缘以及下边缘全部和父元素的边缘平齐，上边缘与父元素的上边缘空出第一个div的高度即可。

点击这里查看实现链接

html:

1
2
3
4
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.container {
  position: relative;
  width: 240px;
  height: 400px;
  border: 10px solid transparent;
  margin: 0 auto;
  background: #f00;
}
.container > div {
  width: 100%;
}
.one {
  height: 100px;
  background: #000;
}
.two {
  position: absolute;
  top: 100px;
  right: 0;
  bottom: 0;
  left: 0;
  background: #ff0;
}

三、flex实现

flex意为弹性布局，因此，严格来说，它实现的效果与前两种方式还是有一定差别的，我们并不需要写死上面那个div的高度，只需要定义出它应该占据父元素高度的比例即可。点击这里查看实现代码。

html:

1
2
3
4
<div class="container">
  <div class="one"></div>
  <div class="two"></div>
</div>

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.container {
  display: flex;
  flex-direction: column /* 排列方向 */;
  width: 240px;
  height: 400px;
  border: 10px solid transparent;
  margin: 0 auto;
  background: #f00;
}
.container > div {
  width: 100%;
}
.one {
  flex: 1;
  background: #000;
}
.two {
  background: #ff0;
  flex: 3;
}