关于大前端:建议收藏总结了42种前端常用布局方案

42次阅读

共计 14134 个字符，预计需要花费 36 分钟才能阅读完成。

作者：一碗周

原文链接：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…

局部大屏案例：

正文完
大前端
发表至： 大前端
2022-04-13
 0
关于大前端:建议收藏总结了42种前端常用布局方案
关于大前端:FlyFish-20已发布大屏开发应用更加灵活便捷
关于大前端:技术干货前端性能优化快速定位代码bug
关于大前端:大前端2022版全面升级某课完结