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

Open

Open

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

Labels

opened

on Jul 13, 2019

Collaborator

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

added

on Jul 13, 2019

可以设置外层自适应高度的容器为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>

利用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>

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

首先明确 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;
  }
}

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

可以设置外层自适应高度的容器为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>

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

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

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

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

to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Assignees

No one assigned

Labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Participants