前端 - 请问如何才能做到需要的效果：box1排除box2的内容之后占满呢？

Question

请问下，
想要的效果为：

关键代码：

<div id="content" style={{  position: 'absolute', top: '24px', bottom: '24px', width: '100%', height: '100%' }}>    <div id="box1" style={{display: 'inline-block', backgroundColor: '#eee', width: '100%', height: '100%'}}></div>    <div id="box2" style={{display: 'inline-block', backgroundColor: '#ddd', width: '200px', height: '100%'}}></div></div>

效果：
box1直接把box2挤落到了下面去：

请问如何才能做到需要的效果呢？

Answer 1

#content {  display: grid;  grid-template-columns: 1fr 200px; /* 1fr代表剩余空间 */}#box1 {  grid-column: 1;}#box2 {  grid-column: 2;}

用CSS 表格布局

#content {  display: table;  width: 100%;}#box1 {  display: table-cell;  width: 100%;}#box2 {  display: table-cell;  width: 200px;}

用 CSS Grid 的 auto-fill 和 minmax 函数

#content {  display: grid;  grid-template-columns: auto-fill minmax(100%, 1fr) 200px;}

用伪元素和 calc() ：

#content::before {  content: "";  width: calc(100% - 200px);  float: left;}#box1 {  width: 100%;}#box2 {  float: right;  width: 200px;}

Answer 2

所以，按照这个要求，其实就是 box1 的右边占据 200px 空间是不存放任何东西的，并且是自适应宽度。
可以实现的方式有很多。

flex 的方式

.content {    display: flex;}.box1 {    flex: 1 1 100%;}.box2 {    flex: 0 0 200px;}

flex 的布局方式应该是最简单也最实用的吧。

calc() 的方式

.box1 {    width: calc(100% - 200px);}.box2 {    width: 200px;}

这个很简单，也很容易理解，就是计算 box1 的宽度剩余值。

float 和 margin 的结合

.box1 {    float: left;    width: 100%;    margin-right: -200px;}.box2 {    float: left;    width: 200px;}

通过 margin-right 负值的方式把 box2 拉过来。

position 的方式

.box1 {    position: absolute;    top: 0;    left: 0;    right: 0;    padding-right: -200px;}.box2 {    position: absolute;    top: 0;    right: 0;    width: 200px;}

通过定位，让这两个元素在父元素中去控制位置。

最后

方式应该还有很多，主要就是一列固定宽度，一列自适应宽度的布局方式。

Answer 3

• 方案1：不改变原 display，使用 calc()

#box1 {  width: calc(100% - 200px);}

• 方案2：改用 flex 布局，使用 flex: 1

#content {  display: flex;  flex-direction: row;}#box1 {  flex: 1;}#box2 {  flex-shrink: 0;  width: 200px;}