[css] 第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

haizhilin2013 · 2019-07-13T20:42:15Z

第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？

xxf1996 · 2019-07-14T02:25:24Z

可以设置外层自适应高度的容器为flex布局，利用flex-basis属性即可实现自动填满剩余高度；代码如下：

.container{
	display: flex;
	flex-flow: column nowrap;
	height: 500px;
	border: 2px dashed orange;
}
.area1 {
	flex-basis: 300px;
	background-color: lightblue
}
.area2 {
	flex: 1;
	background-color: darkcyan;
}

<section class="container">
	<div class="area1">300px</div>
	<div class="area2">other</div>
</section>

在线demo

shejiJiang · 2019-07-14T12:43:19Z

利用css3的calc函数

<html>
<head>
  <style type="text/css">
    .top {
      height: 300px;
      background-color: #dbdd66
    }
    .bottom {
      height: calc(100% - 300px);
      background-color: #427cdd
    }
  </style>
</head>
<body>
<div>
  <div class="top"></div>
  <div class="bottom"></div>
</div>
</body>
</html>

towavephone · 2019-07-15T07:49:12Z

几天前正好遇到，总结如下

首先明确 html 的结构，其中 html 采用 react 写法，css 采用 less 写法

<div className={styles.leftBody}>
  <div className={styles.leftBodyTop}>
    
  </div>
  <div className={styles.leftBodyBottom}>
    
  </div>
</div>

table 布局

比较 hack 的方法

.leftBody {
  display: table;

  .leftBodyTop {
    background: #fff;
    display: table-row;
    height: 0; /* 尽可能的减小高度，即自适应内容 */
  }

  .leftBodyBottom {
    background: #fff;
    display: table-row; /* 占满剩余空间，自适应父类剩余高度 */
    vertical-align: top; /* 将内容放在顶部 */

    &::before { /* 设置 display：table-row; 时，margin 和 padding 设置会失效，故这里用伪元素代替显示 */
      content: '';
      display: block;
      width: 100%;
      height: 16px;
      background: #edf0f4;
    }
  }
}

margin 与 padding

.leftBody {
  overflow: hidden; /* 必须设置，否则露底 */

  .leftBodyTop {
    background: #fff;
  }

  .leftBodyBottom {
    background: #fff;
    margin-top: 16px;
    margin-bottom: -3000px; /* margin 与 padding 相互抵消来撑满剩余高度 */
    padding-bottom: 3000px;
  }
}

absolute

此方法需要对 html 做出改动

<div className={styles.leftBody}>
  <div className={styles.leftBodyTop}>

  </div>
  <div className={styles.leftBodyBottom}>
    <div className={styles.equalHeight} />
    <div className={styles.content}>
    
    </div>
  </div>
</div>

由于绝对定位元素无高度的特性无宽度的特性，我们可以伪造一个高度足够高的绝对定位层（设置背景色，边框等属性），同时设置父标签溢出隐藏，那么其多出来的高度就不会显示了，也就实现了看上去的等高布局效果了

.leftBody {
  overflow: hidden; /* 必须设置，否则露底 */

  .leftBodyTop {
    background: #fff;
  }

  .leftBodyBottom {
    background: #fff;
    margin-top: 16px;
    position: relative;

    .equalHeight {
      background: #fff;
      width: 100%;
      height: 999em;
      position: absolute;
      left: 0;
      top: 0;
    }

    .content {
      position: relative;
      z-index: 1; /* 内容必须在上方，否则被 equalHeight 覆盖 */
    }
  }
}

flex

代码最简洁

.leftBody {
  display: flex;
  flex-direction: column;

  .leftBodyTop {
    background: #fff;
  }

  .leftBodyBottom {
    background: #fff;
    margin-top: 16px;
    flex: 1;
  }
}

xjt31012 · 2019-07-15T09:55:38Z

之前只想到 calc(100% - 300px) ，看了楼上的学会了 flex-basis 和 flex:1这种方式

seho-dev · 2019-11-10T06:31:38Z

可以设置外层自适应高度的容器为flex布局，利用flex-basis属性即可实现自动填满剩余高度；代码如下：

.container{
	display: flex;
	flex-flow: column nowrap;
	height: 500px;
	border: 2px dashed orange;
}
.area1 {
	flex-basis: 300px;
	background-color: lightblue
}
.area2 {
	flex: 1;
	background-color: darkcyan;
}

<section class="container">
	<div class="area1">300px</div>
	<div class="area2">other</div>
</section>

在线demo

简单放一波阮一峰日志关于此属性的记录，避免大家去百度

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

.item {
flex-basis: | auto; /* default auto */
}
它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

一句话就是项目占据了固定的高度，再使用flex: 1填空间的时候，不会考虑固定的空间

haizhilin2013 added the css css label Jul 13, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[css] 第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

[css] 第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

haizhilin2013 commented Jul 13, 2019

xxf1996 commented Jul 14, 2019

shejiJiang commented Jul 14, 2019

towavephone commented Jul 15, 2019

xjt31012 commented Jul 15, 2019

seho-dev commented Nov 10, 2019

[css] 第89天 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

[css] 第89天 外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

Comments

haizhilin2013 commented Jul 13, 2019

xxf1996 commented Jul 14, 2019

shejiJiang commented Jul 14, 2019

towavephone commented Jul 15, 2019

table 布局

margin 与 padding

absolute

flex

xjt31012 commented Jul 15, 2019

seho-dev commented Nov 10, 2019

[css] 第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744

[css] 第89天外层有一个自适应高度的div，里面有两个div，一个高度固定300px，另一个怎么填满剩余的高度？ #744