作者：一碗周

原文链接：https://juejin.cn/post/702896...

著作权归作者所有。商业转载请分割作者取得受权，非商业转载请注明出处。

对CSS布局把握水平决定你在Web开发中的开发页面速度。随着Web技术的一直变革，实现各种布局的形式曾经多得不可胜数了。

本篇文章总结了四十二种CSS的常见布局，这四十二种布局能够细分为如下几类：

  • 程度居中
  • 垂直居中
  • 程度垂直居中
  • 两列布局
  • 三列布局
  • 等分布局
  • Sticky Footer布局
  • 全屏布局

这些内容也正是本篇文章的目录。

程度居中

实现程度布局比较简单，办法也比拟多，这里总结了7种罕用的布局办法，其公共的CSS代码如下所示：

.parent { background: #ff8787; }.child { height: 300px; width: 300px; background: #e599f7; }复制代码

其HTML构造也是固定的，就是一个父级，其宽度继承了<body>的宽度，还有一个子级，这里是固定的300px*300px，代码如下：

<div class="parent">  <div class="child"></div></div>复制代码

最终的实现成果如下：

上图中玫瑰色的块是父级，随页面宽度减少的；淡紫色是子级，绝对于父级居中的。

1. 应用text-align属性

若元素为行内块级元素，也就是display: inline-block的元素，能够通过为其父元素设置text-align: center实现程度居中。实现的CSS代码如下：

.parent {  /* 对于子级为 display: inline-block; 能够通过 text-align: center; 实现程度居中 */  text-align: center;}.child {  display: inline-block;}复制代码

2. 定宽块级元素程度居中(办法一)

对于定宽的的块级元素实现程度居中，最简略的一种形式就是margin: 0 auto;，然而值得注意的是肯定须要设置宽度。

实现CSS代码如下：

.child {  /* 对于定宽的子元素，间接 margin:0 auto; 即可实现程度居中 */  margin: 0 auto;}复制代码

3. 定宽块级元素程度居中(办法二)

对于开启定位的元素，能够通过left属性 和margin实现。

实现CSS代码如下：

.child {  /* 开启定位 */  position: relative;  left: 50%;  /* margin-left 为 负的宽度的一半 */  margin-left: -150px;}复制代码

4. 定宽块级元素程度居中(办法三)

当元素开启决定定位或者固定定位时，left属性和right属性一起设置就会拉伸元素的宽度，在配合width属性与margin属性就能够实现程度居中。

实现CSS代码如下：

.parent {  position: relative;  height: 300px;}.child {  /* 开启定位 父相子绝 */  position: absolute;  /* 程度拉满屏幕 */  left: 0;  right: 0;  width: 300px;  /* 拉满屏幕之后设置宽度，最初通过 margin 实现程度居中 */  margin: auto;}复制代码

5. 定宽块级元素程度居中(办法四)

当元素开启决定定位或者固定定位时，left属性和transform属性即可实现程度居中。

实现CSS代码如下：

.parent {  position: relative;}.child {  /* 开启定位 */  position: absolute;  /* 该办法相似于 left 于 -margin 的用法，然而该办法不须要手动计算宽度。 */  left: 50%;  transform: translateX(-50%);}复制代码

6. Flex计划

通过Flex能够有很多形式实现这个居中布局的成果。

实现CSS代码如下：

.parent {  height: 300px;  /* 开启 Flex 布局 */  display: flex;  /* 通过 justify-content 属性实现居中 */  justify-content: center;}.child {  /* 或者 子元素 margin: auto*/  margin: auto;}复制代码

7. Grid计划

通过Grid实现居中布局比通过Flex实现的形式更多一些。

实现CSS代码如下：

.parent {  height: 300px;  /* 开启 Grid 布局 */  display: grid;  /* 办法一 */  justify-items: center;  /* 办法二 */  justify-content: center;}.child {  /* 办法三 子元素 margin: auto*/  margin: auto;}复制代码

以上就是程度居中布局罕用的几种形式。

垂直居中

实现垂直布局也是比较简单的，办法也比拟多，这里总结了6种罕用的布局办法，其公共的CSS代码如下所示：

.parent {  height: 500px;  width: 300px;  margin: 0 auto;  background-color: #ff8787;}.child {  width: 300px;  height: 300px;  background-color: #91a7ff;}复制代码

其HTML构造也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：

<div class="parent">  <div class="child"></div></div>复制代码

最终的实现成果如下：

1. 行内块级元素垂直居中

若元素是行内块级元素, 根本思维是子元素应用display: inline-block, vertical-align: middle;并让父元素行高等同于高度。

实现CSS代码如下：

.parent {  /* 为父级容器设置行高 */  line-height: 500px;}.child {  /* 将子级元素设置为 inline-block 元素 */  display: inline-block;  /* 通过 vertical-align: middle; 实现居中 */  vertical-align: middle;}复制代码

2. 定位形式实现(办法一)

第一种通过定位的形式实现就比较简单，理论就是通过top: 50%; margin-top: 等于负的高度的一半就能够实现垂直居中。

实现CSS代码如下：

.parent {  /* 为父级容器开启绝对定位 */  position: relative;}.child {  position: absolute;  top: 50%;  /* margin-top: 等于负高度的一半 */  margin-top: -150px;}复制代码

3. 定位形式实现(办法二)

第二种通过定位的形式实现实现思路：top和bottom将子元素拉伸至100%，设置指定的高度，通过margin:auto;即可实现垂直居中。

实现CSS代码如下：

.parent {  /* 为父级容器开启绝对定位 */  position: relative;}.child {  height: 300px;  position: absolute;  /* 垂直拉满 */  top: 0;  bottom: 0;  /* margin: auto 即可实现 */  margin: auto;}复制代码

4. 定位形式实现(办法三)

第三种通过定位的形式就比拟灵便，实用于多种场合，应用top配合tansform即可。

实现CSS代码如下：

.parent {  /* 为父级容器开启绝对定位 */  position: relative;}.child {  position: absolute;  top: 50%;  transform: translateY(-50%);}复制代码

5. Flex计划

通过Flex能够有很多形式实现这个垂直居中布局的成果。

实现CSS代码如下：

.parent {  /* 开启 flex 布局 */  display: flex;  /* 办法一 */  /* align-items: center; */}.child {  /* 办法二 */  margin: auto;}复制代码

通过Flex布局实现不仅仅只有下面两种，这里只介绍最简略的形式

6. Grid计划

通过Grid实现居中布局比通过Flex实现的形式更多一些。

实现CSS代码如下：

.parent {  display: grid;  /* 办法一 */  /* align-items: center; */  /* 办法二 */  /* align-content: center; */}.child {  /* 办法三 */  /* margin: auto; */  /* 办法四 */  align-self: center;}复制代码

以上就是垂直居中布局罕用的几种形式。

程度垂直居中

实现程度垂直布局根本就是将下面几种形式联合应用，这里总结了7种罕用的布局办法，其公共的CSS代码如下所示：

body {  margin: 0;}.parent {  height: 500px;  width: 500px;  background-color: #eebefa;  margin: 0 auto;}.child {  height: 300px;  width: 300px;  background-color: #f783ac;}复制代码

其HTML构造也是固定的，就是一个父级包裹一个子级，这里的子级是固定的300px*300px，代码如下：

<div class="parent">  <div class="child"></div></div>复制代码

最终的实现成果如下：

1. 行内块级程度垂直居中计划

步骤如下：

  1. 容器元素行低等于容器高度
  2. 通过text-align: center;实现程度居中
  3. 将子级元素设置为程度块级元素
  4. 通过vertical-align: middle;实现垂直居中

实现CSS代码如下：

.parent {  /* 1. 设置行低等于容器高度 */  line-height: 500px;  /* 通过 text-align: center; 实现程度居中 */  text-align: center;}.child {  /* 将子级元素设置为程度块级元素 */  display: inline-block;  /* 通过 vertical-align: middle; 实现垂直居中 */  vertical-align: middle;}复制代码

2. 定位实现程度垂直居中计划(一)

步骤如下：

  1. 使子元素绝对于容器元素定位
  2. 子元素开启相对定位
  3. 设置该元素的偏移量，值为50% 减去宽度/高度的一半

实现CSS代码如下：

.parent {  /* 1. 使子元素绝对于本元素定位 */  position: relative;}.child {  /* 2. 开启相对定位 */  position: absolute;  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */  left: calc(50% - 150px);  top: calc(50% - 150px);}复制代码

3. 定位实现程度垂直居中计划(二)

步骤如下：

  1. 使子元素绝对于容器元素定位
  2. 子元素开启相对定位
  3. 设置该元素的偏移量，值为50%
  4. 通过外边距-值的形式将元素挪动回去

实现CSS代码如下：

.parent {  /* 1. 使子元素绝对于本元素定位 */  position: relative;}.child {  /* 2. 开启相对定位 */  position: absolute;  /* 3. 设置该元素的偏移量，值为 50% */  left: 50%;  top: 50%;  margin-left: -150px;  margin-top: -150px;}复制代码

4. 定位实现程度垂直居中计划(三)

步骤如下：

  1. 使子元素绝对于容器元素定位
  2. 子元素开启相对定位
  3. 将子元素拉满整个容器
  4. 通过margin:auto实现程度垂直居中

实现CSS代码如下：

.parent {  /* 1. 使子元素绝对于本元素定位 */  position: relative;}.child {  /* 2. 开启相对定位 */  position: absolute;  /* 3. 将子元素拉满整个容器 */  top: 0;  left: 0;  right: 0;  bottom: 0;  /* 4. 通过 margin:auto 实现程度垂直居中 */  margin: auto;}复制代码

5. 定位实现程度垂直居中计划(四)

步骤如下：

  1. 使子元素绝对于容器元素定位
  2. 子元素开启相对定位
  3. 设置该元素的偏移量，值为50%
  4. 通过translate反向偏移的形式，实现居中

实现CSS代码如下：

.parent {  /* 1. 使子元素绝对于本元素定位 */  position: relative;}.child {  /* 2. 开启相对定位 */  position: absolute;  /* 3. 设置该元素的偏移量，值为 50%*/  left: 50%;  top: 50%;  /* 通过translate反向偏移的形式，实现居中 */  transform: translate(-50%, -50%);}复制代码

6. Flex计划

步骤如下：

  1. 将元素设置为 Flex 布局
  2. 通过justify-content: center以及align-items: center实现或者margin: auto;实现。

实现CSS代码如下：

.parent {  /* 1. 将元素设置为 Flex 布局 */  display: flex;  /* 2. 通过 justify-content 以及 align-items: center 实现 */  /* justify-content: center;  align-items: center; */}.child {  /* 或者通过 margin auto 实现 */  margin: auto;}复制代码

7. Grid计划

Grid计划的实现形式相对来说比较简单，形式也较多。

实现CSS代码如下：

.parent {  /* 1. 元素设置为Grid 元素 */  display: grid;  /* 通过 items 属性实现*/  /* align-items: center; */  /* justify-items: center; */  /* items 的缩写 */  /* place-items: center; */  /* 或者通过 content 属性 */  /* align-content: center; */  /* justify-content: center; */  /* content 的缩写 */  /* place-content: center; */}.child {  /* 或者通过 margin auto 实现 */  /* margin: auto; */  /* 或者通过 self 属性 */  /* align-self: center;  justify-self: center; */  /* self 的缩写 */  place-self: center;}复制代码

实现程度垂直居中布局的形式大多是通过下面两种布局的形式相结合。

两列布局

所谓的两列布局就是一列定宽(也有可能由子元素决定宽度)，一列自适应的布局。最终成果如下所示：

这里用到的HTML构造如下：

<!-- 解决高度塌陷 --><div class="container clearfix">  <div class="left">定宽</div>  <div class="right">自适应</div></div>复制代码

公共的CSS代码如下：

body {  margin: 0;}.container {  height: 400px;  background-color: #eebefa;}.left {  height: 400px;  width: 200px;  background-color: #f783ac;  font-size: 70px;  line-height: 400px;  text-align: center;}.right {  height: 400px;  background-color: #c0eb75;  font-size: 70px;  line-height: 400px;}/* 革除浮动 */.clearfix:after {  content: '';  display: block;  height: 0;  clear: both;  visibility: hidden;}复制代码

1. float+calc()函数实现左列定宽右列自适应

步骤如下：

  1. 右边列开启浮动
  2. 左边列开启浮动
  3. 左边列宽度为父级 100%减去左列的宽度

实现CSS代码如下：

.left {  /* 右边列开启浮动 */  float: left;}.right {  /* 左边列开启浮动 */  float: left;  /* 宽度减去左列的宽度 */  width: calc(100% - 200px);}复制代码

2. float+margin-left实现左列定宽右列自适应

步骤如下：

  1. 右边列开启浮动
  2. 通过外边距的形式使该容器的右边有右边列容器的宽度的外边距

实现CSS代码如下：

.left {  /* 右边列开启浮动 */  float: left;}.right {  /* 通过外边距的形式使该容器的右边有200px */  margin-left: 200px;}复制代码

3. absolute+margin-left实现左列定宽右列自适应

步骤如下：

  1. 开启定位脱离文档流
  2. 通过外边距的形式使该容器的右边有右边列容器的宽度的外边距

实现CSS代码如下：

.left {  /* 开启定位脱离文档流 */  position: absolute;}.right {  /* 通过外边距的形式使该容器的右边有200px */  margin-left: 200px;}复制代码
值得注意的是 以上几种计划右边列必须定宽，才能够实现，上面这几种计划右边列能够由子级撑起。

4. float+overflow实现左列定宽右列自适应

步骤如下：

  1. 左侧元素开始浮动
  2. 右侧自适应元素设置overflow会创立一个BFC实现自适应

实现CSS代码如下：

.left {  /* 1. 左侧元素开始浮动 */  float: left;}.right {  /* 2. 右侧自适应元素设置 overflow 会创立一个BFC 实现自适应 */  overflow: hidden;}复制代码

5. Flex计划

通过Flex布局实现该性能次要是通过 flex 属性来实现示例代码如下：

.container {  display: flex;}.right {  flex: 1;  /* flex: 1; 示意 flex-grow: 1; 即该项占所有残余空间 */}复制代码

6. Grid计划

通过 Grid 布局实现该性能次要是通过template属性实现，具体代码如下所示：

.container {  display: grid;  /* 将其划分为两行，其中一列有自身宽度决定， 一列占残余宽度*/  grid-template-columns: auto 1fr;}复制代码

三列布局

三列布局次要分为两种：

  • 第一种是前两列定宽，最初一列自适应，这一种实质上与两列布局没有什么区别，能够参照两列布局实现。

<!---->

  • 第二种是前后两列定宽，两头自适应，最终效果图如下

公共CSS如下：

body {  margin: 0;}.container {  height: 400px;  background-color: #eebefa;}.left {  height: 400px;  width: 200px;  background-color: #f783ac;}.content {  height: 400px;  background-color: #d9480f;}.right {  height: 400px;  width: 200px;  background-color: #c0eb75;}.left,.content,.right {  font-size: 70px;  line-height: 400px;  text-align: center;}/* 革除浮动 */.clearfix:after {  content: '';  display: block;  height: 0;  clear: both;  visibility: hidden;}复制代码

HTML 构造如下：

<!-- 解决高度塌陷 --><div class="container clearfix">  <div class="left">左</div>  <div class="content">内容</div>  <div class="right">右</div></div>复制代码

1. 通过float实现(一)

实现步骤：

  1. 为了实现成果须要调整HTML构造，调整后如下：
<!-- 解决高度塌陷 --><div class="container clearfix">  <div class="left">左</div>  <div class="right">右</div>  <div class="content">内容</div></div>复制代码
  1. 左列容器开启左浮动
  2. 右列容器开启右浮动
  3. 自适应元素设置overflow会创立一个BFC实现自适应

实现CSS代码如下：

.left {  /* 1. 左列容器开启左浮动 */  float: left;}.content {  /* 自适应元素设置 overflow 会创立一个BFC 实现自适应 */  overflow: hidden;}.right {  /* 2. 右列容器开启右浮动 */  float: right;}复制代码

2. 通过float实现(二)

实现步骤：

  1. 为了实现成果须要调整 HTML 构造，调整后如下：
<!-- 解决高度塌陷 --><div class="container clearfix">  <div class="left">左</div>  <div class="right">右</div>  <div class="content">内容</div></div>复制代码
  1. 左列容器开启左浮动
  2. 右列容器开启右浮动
  3. 使两头自适应的宽度为父级容器减去两个定宽的列

实现CSS代码如下：

.left {  /* 1. 左列容器开启左浮动 */  float: left;}.content {  /* 3. 使两头自适应的宽度为父级容器减去两个定宽的列 */  width: calc(100%-400px);}.right {  /* 2. 右列容器开启右浮动 */  float: right;}复制代码

3. 通过position实现

实现步骤

  1. 左右两列脱离文档流，并通过偏移的形式达到本人的区域
  2. 使两头自适应的宽度为父级容器减去两个定宽的列
  3. 通过外边距将容器往内放大

实现CSS代码如下：

.left {  /* 1. 左右两列脱离文档流，并通过偏移的形式达到本人的区域 */  position: absolute;  left: 0;  top: 0;}.content {  /* 2. 使两头自适应的宽度为父级容器减去两个定宽的列 */  width: calc(100%-400px);  /* 3. 通过外边距将容器往内放大 */  margin-right: 200px;  margin-left: 200px;}.right {  position: absolute;  right: 0;  top: 0;}复制代码

4. Flex计划

通过 Flex 布局实现该性能次要是通过 flex 属性来实现。

实现CSS代码如下：

.container {  display: flex;}.right {  flex: 1;  /* flex: 1; 示意 flex-grow: 1; 即该项占所有残余空间 */}复制代码

5. Grid计划

通过 Grid 布局实现该性能次要是通过 template 属性实现。

实现CSS代码如下：

.container {  display: grid;  /* 将其划分为两行，其中一列有自身宽度决定， 一列占残余宽度*/  grid-template-columns: auto 1fr auto;}复制代码

等分布局

等分布局就是将一个容器均匀分成几等份，这里以 4 等分为例，次要介绍4种办法。

公共CSS局部如下：

body {  margin: 0;}.container {  height: 400px;  background-color: #eebefa;}.item {  height: 100%;}.item1 {  background-color: #eccc68;}.item2 {  background-color: #a6c1fa;}.item3 {  background-color: #fa7d90;}.item4 {  background-color: #b0ff70;}/* 革除浮动 */.clearfix:after {  content: '';  display: block;  height: 0;  clear: both;  visibility: hidden;}复制代码

公共HTML代码如下：

<!-- 父元素革除浮动 --><div class="container clearfix">  <div class="item item1"></div>  <div class="item item2"></div>  <div class="item item3"></div>  <div class="item item4"></div></div>复制代码

最终的成果如下图所示：

1. 浮动+百分比形式

这种形式比较简单，开启浮动，使每个元素占25%的宽度。

实现CSS代码如下：

.item {  /* 开启浮动，每个元素占 25% 的宽度 */  width: 25%;  float: left;}复制代码

2. 行内块级+百分比形式

这种形式与下面那种形式相似，不过须要留神的是行内块级元素有一些相似于边距的几个像素，导致各25%会超出容器。

实现CSS代码如下：

.item {  /* 设置每个元素为行内块级元素，每个元素占 24.5% 的宽度 */  width: 24.5%;  /* 因为行内块级元素有一些相似于边距的几个像素，导致各占25会超出容器 */  display: inline-block;}复制代码

3. Flex计划

通过 Flex 布局实现该性能次要是通过flex属性来实现。

实现CSS代码如下：

.container {  /* 开启 flex 布局 */  display: flex;}.item {  /* 每个元素占雷同的宽度 */  flex: 1;}复制代码

4. Grid计划

通过 Grid 布局实现该性能次要是通过template属性实现。

实现CSS代码如下：

.container {  /* 开启 grid 布局 */  display: grid;  grid-template-columns: repeat(4, 1fr);  /* 应用 repeat 函数生成如下代码 */  /* grid-template-columns: 1fr 1fr 1fr 1fr; */}复制代码

Sticky Footer布局

所谓的Sticky Footer 布局并不是一种新的前端技术和概念，它就是一种网页布局。如果页面内容不够长时，底部栏就会固定到浏览器的底部；如果足够长时，底部栏就后追随在内容的前面。如下图所示：

这里来介绍实现该布局的4种形式

公共的CSS代码如下：

body {    margin: 0;}.container {    height: 400px;    display: flex;}.left {    height: 400px;    width: 200px;    background-color: #f759ab;}.content {    height: 400px;    background-color: #52c41a;    flex: 1;}.right {    height: 400px;    width: 200px;    background-color: #f759ab;}.left,.content,.right {    font-size: 70px;    line-height: 400px;    text-align: center;}.header {    height: 100px;    background-color: #70a1ff;}.footer {    height: 100px;    background-color: #ff7a45;}.header,.footer {    line-height: 100px;    font-size: 52px;    text-align: center;}复制代码

公共的HTML如下：

<div class="main">    <div class="header">header</div>    <div class="container">        <div class="left">left</div>        <div class="content">content</div>        <div class="right">right</div>    </div>    <div class="footer">footer</div></div>复制代码

1. 相对定位的形式

通过相对定位的形式实现Sticky Footer布局的步骤如下：

  1. 设置最外层容器高度为100%；
  2. 让子元素元素绝对于容器元素进行定位，并设置容器元素最小高度为100%；
  3. 在两头区域设置padding-bottom为footer的高度 ；
  4. 底部栏相对定位，并始终吸附在底部即可实现。

实现CSS代码如下：

/* 1. 设置最外层容器为100% */html,body {    height: 100%;}/* 2. 让子元素元素绝对于容器元素进行定位，并设置容器元素最小高度为100% */.main {    position: relative;    min-height: 100%;}/* 3. 在两头区域设置 padding-bottom 为footer 的高度 */.container {    padding-bottom: 100px;}/* 因为开启了相对定位，宽度成了自适应，设置为100% bottom:0 始终保持底部 */.footer {    position: absolute;    width: 100%;    bottom: 0;}复制代码

2. 应用calc函数实现

应用calc函数实现的形式会比较简单，两头的容器起码高度为视口宽度的100% - 头部和底部两局部的高度即可实现该性能。

实现CSS代码如下：

.container {    /* 这里的 两头 局部的容器起码为视口宽度的 100% - 头部和底部两局部的高度即可实现该性能 */    min-height: calc(100vh - 200px);}复制代码

3. Flex计划

实现步骤如下

  1. 开启flex布局
  2. 将子元素布局方向批改为垂直排列
  3. 设置最小高度为以后视口，使不论两头局部有多高，始终都能够放弃在底部
  4. 设置两头局部容器高度为自适应

实现CSS代码如下：

.main {    /* 开启flex布局 */    display: flex;    /* 将子元素布局方向批改为垂直排列 */    flex-flow: column;    /* 设置最小高度为以后视口，使不论两头局部有多高，始终都能够放弃在底部 */    min-height: 100vh;}.container {    /* 设置 两头 局部自适应 */    flex: 1;}复制代码

4. Grid计划

实现步骤如下

  1. 开启grid布局
  2. 置最小高度为以后视口，使不论两头局部有多高，始终都能够放弃在底部

实现CSS代码如下：

.main {    /* 开启grid布局 */    display: grid;    grid-template-rows: auto 1fr auto;    /* 设置最小高度为以后视口，使不论两头局部有多高，始终都能够放弃在底部 */    min-height: 100vh;}复制代码

全屏布局

全副布局次要利用在后盾，次要成果如下所示：

这里介绍三种全屏布局的实现办法。

公共的CSS代码如下：

body {  margin: 0;}body,html,.container {  height: 100vh;  box-sizing: border-box;  text-align: center;  overflow: hidden;}.content {  background-color: #52c41a;  /* * 两头部门的布局能够参考 两列 三列 布局 */  display: grid;  grid-template-columns: auto 1fr;}.left {  width: 240px;  background-color: #52c41a;  font-size: 80px;  line-height: calc(100vh - 200px);}.right {  background-color: #f759ab;  font-size: 60px;}.header {  height: 100px;  background-color: #70a1ff;}.footer {  height: 100px;  background-color: #ff7a45;}.header,.footer {  line-height: 100px;  font-size: 52px;}复制代码

HTML构造如下：

<div class="container">    <div class="header">header</div>    <div class="content">        <div class="left">导航</div>        <div class="right">            <div class="right-in">自适应，超出高度呈现滚动条</div>        </div>    </div>    <div class="footer">footer</div></div>复制代码

1. 应用calc函数实现

实现步骤如下：

  1. 通过calc函数计算出两头容器的高度。
  2. 两头呈现滚动条的容器设置overflow: auto即呈现滚动条的时候呈现滚动条。

实现CSS代码如下：

.content {    overflow: hidden;    /* 通过 calc 计算容器的高度 */    height: calc(100vh - 200px);}.left {    height: 100%;}.right {    /* 如果超出呈现滚动条 */    overflow: auto;    height: 100%;}.right-in {    /* 假如容器内有500px的元素 */    height: 500px;}复制代码

2. Flex 计划

应用Flex形式实现该布局比较简单。

实现CSS代码如下：

.container {    /* 开启flex布局 */    display: flex;    /* 将子元素布局方向批改为垂直排列 */    flex-flow: column;}.content {    /* 如果超出呈现滚动条 */    overflow: auto;    /* 设置 两头 局部自适应 */    flex: 1;}.right-in {    /* 假如容器内有500px的元素 */    height: 500px;}复制代码

3. Grid 计划

grid布局对于这种布局来说，实现起来是十分得心应手的，通过template属性即可实现。

实现CSS代码如下：

.container {    /* 开启grid布局 */    display: grid;    grid-template-rows: auto 1fr auto;}.content {    /* 如果超出呈现滚动条 */    overflow: auto;}.right-in {    /* 假如容器内有500px的元素 */    height: 500px;}复制代码

{完}

写在最初

近年来，在AIOps畛域疾速倒退的背景下，IT工具、平台能力、解决方案、AI场景及可用数据集的迫切需要在各行业爆发。基于此，云智慧在2021年8月公布了AIOps社区， 旨在树起一面开源旗号，为各行业客户、用户、研究者和开发者们构建沉闷的用户及开发者社区，独特奉献及解决行业难题、促成该畛域技术倒退。

社区先后 开源 了数据可视化编排平台-FlyFish、运维治理平台 OMP 、云服务治理平台-摩尔平台、 Hours 算法等产品。

可视化编排平台-FlyFish：

我的项目介绍：https://www.cloudwise.ai/flyF...

Github地址： https://github.com/CloudWise-...

Gitee地址： https://gitee.com/CloudWise/f...

行业案例：https://www.bilibili.com/vide...

局部大屏案例：