一个div宽度或高度固定，另一个div铺满剩余空间

Amy.Wang

已于 2022-02-05 15:09:15 修改

阅读量2.2k

点赞数 2

分类专栏： CSS 前端文章标签： css3 前端

于 2020-08-18 23:52:19 首次发布

前端同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

一. 一个div宽度固定，实现如下效果： box1固定宽度200px; box2铺满页面剩余部分

<div class="wrapper">
  <div class="box1"></div>
  <div class="box2"></div>
</div>

1. 利用flex布局

.wrapper {
  display: flex;
}
.box1 {
  width: 200px;
  height: 200px;
  background-color: bisque;
}

.box2 {
  flex: 1;
  height: 100px;
  background-color: blueviolet;
}

2. 用浮动布局和overflow属性

.box1 {
  width: 200px;
  height: 200px;
  background-color: bisque;
  float: left;
}

.box2 {
  background-color: blueviolet;
  height: 100px;
  overflow: hidden;
}

3. 用浮动和左边距

.box1 {
  width: 200px;
  height: 200px;
  background-color: bisque;
  float: left;
}

.box2 {
  background-color: blueviolet;
  height: 100px;
  margin-left:0;
}

二、一个div高度固定，实现如下效果

<div class="content">
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>

1. 利用flex

.content {
  width: 500px;
  height: 500px;
  background-color: brown;
  display: flex;
  flex-direction: column;
}
.top {
  width: 500px;
  height: 200px;
  background-color: burlywood;
}
.bottom {
  flex: 1;
  width: 300px;
  background-color: cadetblue;
}

2. 利用calc计算高度

.content {
  width: 500px;
  height: 500px;
  background-color: brown;
}
.top {
  width: 500px;
  height: 200px;
  background-color: burlywood;
}
.bottom {
  width: 300px;
  background-color: cadetblue;
  height: calc(100% - 200px);
}

3. 使用绝对定位

.content {
  width: 500px;
  height: 500px;
  background-color: brown;
  position: relative;
}
.top {
  width: 500px;
  height: 200px;
  background-color: burlywood;
}
.bottom {
  width: 300px;
  background-color: cadetblue;
  position: absolute;
  bottom: 0;
  top: 200px;
}