建议收藏！总结了 42 种前端常用布局方案

news2024/11/18 9:42:20

对 CSS 布局掌握程度决定你在Web开发中的开发页面速度。随着Web技术的不断革新，实现各种布局的方式已经多得数不胜数了。

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

  • 水平居中
  • 垂直居中
  • 水平垂直居中
  • 两列布局
  • 三列布局
  • 等分布局
  • Sticky Footer布局
  • 全屏布局
    这些内容也正是本篇文章的目录。

水平居中

实现水平布局比较简单，方法也比较多，这里总结了7种常用的布局方法，其公共的CSS代码如下所示：

.parent { background: #ff8787; }
.child { height: 300px; width: 300px; background: #e599f7; }

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

<div class="parent">
  <div class="child"></div>
</div>

最终的实现效果如下：
在这里插入图片描述
上图中玫瑰色的块是父级，随页面宽度增加的；淡紫色是子级，相对于父级居中的。

  1. 使用text-align属性

若元素为行内块级元素，也就是 display: inline-block 的元素，可以通过为其父元素设置t ext-align: center 实现水平居中。实现的CSS代码如下：

.parent {
  /* 对于子级为 display: inline-block; 可以通过 text-align: center; 实现水平居中 */
  text-align: center;
}

.child {
  display: inline-block;
}
  1. 定宽块级元素水平居中(方法一)

对于定宽的的块级元素实现水平居中，最简单的一种方式就是 margin: 0 auto;，但是值得注意的是一定需要设置宽度。实现 CSS 代码如下：

.child {
  /* 对于定宽的子元素，直接 margin:0 auto; 即可实现水平居中 */
  margin: 0 auto;
}
  1. 定宽块级元素水平居中(方法二)

对于开启定位的元素，可以通过 left 属性 和 margin 实现。实现CSS代码如下：

.child {
  /* 开启定位 */
  position: relative;
  left: 50%;
  /* margin-left 为 负的宽度的一半 */
  margin-left: -150px;
}
  1. 定宽块级元素水平居中(方法三)

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

实现 CSS 代码如下：

.parent {
  position: relative;
  height: 300px;
}

.child {
  /* 开启定位 父相子绝 */
  position: absolute;
  /* 水平拉满屏幕 */
  left: 0;
  right: 0;
  width: 300px;
  /* 拉满屏幕之后设置宽度，最后通过 margin 实现水平居中 */
  margin: auto;
}
  1. 定宽块级元素水平居中(方法四)

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

实现CSS代码如下：

.parent {
  position: relative;
}

.child {
  /* 开启定位 */
  position: absolute;
  /* 该方法类似于 left 于 -margin 的用法，但是该方法不需要手动计算宽度。 */
  left: 50%;
  transform: translateX(-50%);
}
  1. Flex方案

通过 Flex 可以有很多方式实现这个居中布局的效果。

实现 CSS 代码如下

.parent {
  height: 300px;
  /* 开启 Flex 布局 */
  display: flex;
  /* 通过 justify-content 属性实现居中 */
  justify-content: center;
}

.child {
  /* 或者 子元素 margin: auto*/
  margin: auto;
}
  1. 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;
}
  1. 定位方式实现(方法一)

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

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  /* margin-top: 等于负高度的一半 */
  margin-top: -150px;
}
  1. 定位方式实现(方法二)

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

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  height: 300px;
  position: absolute;
  /* 垂直拉满 */
  top: 0;
  bottom: 0;
  /* margin: auto 即可实现 */
  margin: auto;
}
  1. 定位方式实现(方法三)

第三种通过定位的方式就比较灵活，适用于多种场合，使用 top 配合 tansform 即可。

实现CSS代码如下：

.parent {
  /* 为父级容器开启相对定位 */
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
  1. Flex方案

通过 Flex 可以有很多方式实现这个垂直居中布局的效果。

实现CSS代码如下：

.parent {
  /* 开启 flex 布局 */
  display: flex;
  /* 方法一 */
  /* align-items: center; */
}

.child {
  /* 方法二 */
  margin: auto;
}

通过 Flex 布局实现不仅仅只有上面两种，这里只介绍最简单的方式。

  1. 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. 行内块级水平垂直居中方案

步骤如下：

  • 容器元素行高等于容器高度
  • 通过 text-align: center; 实现水平居中
  • 将子级元素设置为水平块级元素
  • 通过 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;
}
  1. 定位实现水平垂直居中方案(一)

步骤如下：

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

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50%减去宽度/高度的一半 */
  left: calc(50% - 150px);
  top: calc(50% - 150px);
}
  1. 定位实现水平垂直居中方案(二)

步骤如下：

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

实现CSS代码如下：

.parent {
  /* 1. 使子元素相对于本元素定位 */
  position: relative;
}
.child {
  /* 2. 开启绝对定位 */
  position: absolute;
  /* 3. 设置该元素的偏移量，值为 50% */
  left: 50%;
  top: 50%;
  margin-left: -150px;
  margin-top: -150px;
  1. 定位实现水平垂直居中方案(三)

步骤如下：

  • 使子元素相对于容器元素定位
  • 子元素开启绝对定位
  • 将子元素拉满整个容器
  • 通过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;
}
  1. 定位实现水平垂直居中方案(四)

步骤如下：

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

实现 CSS 代码如下：

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

步骤如下：

  • 将元素设置为 Flex 布局
  • 通过 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;
}
  1. 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()函数完成左列定宽右列自适应

步骤如下：

  • 左边列开启浮动
  • 右边列开启浮动
  • 右边列宽度为父级 100%减去左列的宽度

实现CSS代码如下：

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 右边列开启浮动 */
  float: left;
  /* 宽度减去左列的宽度 */
  width: calc(100% - 200px);
}
  1. float+margin-left完成左列定宽右列自适应

步骤如下：

  • 左边列开启浮动

  • 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

实现CSS代码如下：

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 通过外边距的方式使该容器的左边有200px */
  margin-left: 200px;
}
  1. absolute+margin-left完成左列定宽右列自适应

步骤如下：

  • 开启定位脱离文档流
  • 通过外边距的方式使该容器的左边有左边列容器的宽度的外边距

实现CSS代码如下：

.left {
  /* 开启定位脱离文档流 */
  position: absolute;
}
.right {
  /* 通过外边距的方式使该容器的左边有200px */
  margin-left: 200px;
}

值得注意的是 以上几种方案左边列必须定宽，才可以实现，下面这几种方案左边列可以由子级撑起。

  1. float+overflow完成左列定宽右列自适应

步骤如下：

  • 左侧元素开始浮动
  • 右侧自适应元素设置overflow会创建一个BFC完成自适应

实现CSS代码如下：

.left {
  /* 1. 左侧元素开始浮动 */
  float: left;
}
.right {
  /* 2. 右侧自适应元素设置 overflow 会创建一个BFC 完成自适应 */
  overflow: hidden;
}
  1. Flex方案

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

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */
}
  1. 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实现(一)

实现步骤：

  • 为了完成效果需要调整HTML结构，调整后如下：
<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="content">内容</div>
</div>
  • 左列容器开启左浮动
  • 右列容器开启右浮动
  • 自适应元素设置overflow会创建一个BFC完成自适应

实现CSS代码如下

.left {
  /* 1. 左列容器开启左浮动 */
  float: left;
}
.content {
  /* 自适应元素设置 overflow 会创建一个BFC 完成自适应 */
  overflow: hidden;
}
.right {
  /* 2. 右列容器开启右浮动 */
  float: right;
}
  1. 通过float实现(二)

实现步骤：

  • 为了完成效果需要调整 HTML 结构，调整后如下：
<!-- 解决高度塌陷 -->
<div class="container clearfix">
  <div class="left">左</div>
  <div class="right">右</div>
  <div class="content">内容</div>
</div>
  • 左列容器开启左浮动
  • 右列容器开启右浮动
  • 使中间自适应的宽度为父级容器减去两个定宽的列

实现CSS代码如下：

.left {
  /* 1. 左列容器开启左浮动 */
  float: left;
}
.content {
  /* 3. 使中间自适应的宽度为父级容器减去两个定宽的列 */
  width: calc(100%-400px);
}
.right {
  /* 2. 右列容器开启右浮动 */
  float: right;
}
  1. 通过position实现

实现步骤

  • 左右两列脱离文档流，并通过偏移的方式到达自己的区域
  • 使中间自适应的宽度为父级容器减去两个定宽的列
  • 通过外边距将容器往内缩小

实现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;
}
  1. Flex方案

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

实现CSS代码如下：

.container {
  display: flex;
}
.right {
  flex: 1;
  /* flex: 1; 表示 flex-grow: 1; 即该项占所有剩余空间 */
}
  1. 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;
}
  1. 行内块级+百分比方式

这种方式与上面那种方式类似，不过需要注意的是行内块级元素有一些类似于边距的几个像素，导致各25%会超出容器。

实现CSS代码如下：

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

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

实现CSS代码如下：

.container {
  /* 开启 flex 布局 */
  display: flex;
}
.item {
  /* 每个元素占相同的宽度 */
  flex: 1;
}
  1. 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布局的步骤如下：

  • 设置最外层容器高度为100%；
  • 让子元素元素相对于容器元素进行定位，并设置容器元素最小高度为100%；
  • 在中间区域设置padding-bottom为footer的高度 ；
  • 底部栏绝对定位，并一直吸附在底部即可实现。

实现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;
}
  1. 使用calc函数实现

使用 calc 函数实现的方式会比较简单，中间的容器最少高度为视口宽度的100% - 头部和底部两部分的高度即可完成该功能。

实现CSS代码如下：

.container {
    /* 这里的 中间 部分的容器最少为视口宽度的 100% - 头部和底部两部分的高度即可完成该功能 */
    min-height: calc(100vh - 200px);
}
  1. Flex方案

实现步骤如下

  • 开启 flex 布局
  • 将子元素布局方向修改为垂直排列
  • 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部
  • 设置中间部分容器高度为自适应

实现CSS代码如下：

.main {
    /* 开启flex布局 */
    display: flex;
    /* 将子元素布局方向修改为垂直排列 */
    flex-flow: column;
    /* 设置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部 */
    min-height: 100vh;
}
.container {
    /* 设置 中间 部分自适应 */
    flex: 1;
}
  1. Grid方案

实现步骤如下

  • 开启 grid 布局
  • 置最小高度为当前视口，使不管中间部分有多高，始终都可以保持在底部

实现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函数实现

实现步骤如下：

  • 通过 calc 函数计算出中间容器的高度。
  • 中间出现滚动条的容器设置overflow: auto即出现滚动条的时候出现滚动条。

实现CSS代码如下：

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

使用 Flex 方式实现该布局比较简单。

实现CSS代码如下

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

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

实现CSS代码如下

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/852470.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

# Linux下最好用的歌词工具：OSD Lyrics安装使用指引

# Linux下最好用的歌词工具：OSD Lyrics安装使用指引

Linux下最好用的歌词工具&#xff1a;OSD Lyrics安装使用指引 文章目录 Linux下最好用的歌词工具&#xff1a;OSD Lyrics安装使用指引1 安装1.1 直接安装1.2 源码安装 2 错误解决3 快捷方式与软件设置&#xff08;很重要&#xff09;4 首选项相关界面5 最后 OSD Lyrics 是一个桌…
阅读更多...
聚焦AIGC与大模型，和鲸ModelWhale荣登“2023数字生态500强”优秀案例解决方案榜单

聚焦AIGC与大模型，和鲸ModelWhale荣登“2023数字生态500强”优秀案例解决方案榜单

8月4日&#xff0c;2023 数字生态大会在北京盛大举行&#xff0c;大会聚焦并锁定 AIGC 及大模型热点&#xff0c;以“ AIGC 新生态 数智新时代”为主题&#xff0c;由 B.P 商业伙伴联合盛景网联共同举办。 为深入发挥在产业领域的启迪借鉴价值作用&#xff0c;本次大会重磅发布…
阅读更多...
android 如何分析应用的内存（十七）——使用MAT查看Android堆

android 如何分析应用的内存（十七）——使用MAT查看Android堆

android 如何分析应用的内存&#xff08;十七&#xff09;——使用MAT查看Android堆 前一篇文章&#xff0c;介绍了使用Android profiler中的memory profiler来查看Android的堆情况。 如Android 堆中有哪些对象&#xff0c;这些对象的引用情况是什么样子的。 可是我们依然面临…
阅读更多...
多功能翻译工具——图片翻译器

多功能翻译工具——图片翻译器

这是一款多功能的翻译工具&#xff0c;简单几步即可完成图片翻译操作&#xff0c;支持多种语言的翻译&#xff0c;包括英语、法语、德语、西班牙语等&#xff0c;并支持文档翻译、pdf翻译、同声传译等形式的翻译功能。可以轻松翻译图片、pdf、execl、txt、word等格式的文档&…
阅读更多...
Python-OpenCV中的图像处理-图像平滑

Python-OpenCV中的图像处理-图像平滑

Python-OpenCV中的图像处理-图像平滑 图像平滑平均滤波高斯模糊中值模糊双边滤波 图像平滑 使用低通滤波器可以达到图像模糊的目的。这对与去除噪音很有帮助。其实就是去除图像中的高频成分&#xff08;比如&#xff1a;噪音&#xff0c;边界&#xff09;。所以边界也会被模糊…
阅读更多...
Netty 4.1.95.Final 正式发布，Java 网络应用框架

Netty 4.1.95.Final 正式发布，Java 网络应用框架

导读Netty 4.1.95 稳定版已发布。Netty 是一个异步事件驱动的网络应用框架&#xff0c;主要用于可维护的高性能协议服务器和客户端的快速开发。 此版本主要是修复错误&#xff0c;同时添加了一些新特性&#xff1a; 添加资源泄漏侦听器 (resource leak listener) (#13466)减少…
阅读更多...
郑州市管城回族区区长丁晓永莅临中创算力走访调研重点企业

郑州市管城回族区区长丁晓永莅临中创算力走访调研重点企业

为持续优化营商环境&#xff0c;助力企业高质量发展。8月8日&#xff0c;郑州市管城回族区区长丁晓永、副区长李建安等领导深入辖区重点企业中创算力走访调研&#xff0c;与企业负责人座谈交流&#xff0c;了解企业诉求&#xff0c;为企业纾困解难。 中创算力董事长许伟威、技…
阅读更多...
如何选择合适的GPU进行渲染？最佳渲染GPU推荐

如何选择合适的GPU进行渲染？最佳渲染GPU推荐

选择正确 GPU 进行渲染的技巧 以下是为 3D 艺术选择显卡的一些技巧&#xff1a; 考虑一下您的预算&#xff1a;显卡的价格从几百元到几万元不等。在开始购物之前确定您愿意花多少钱。阅读评论&#xff1a;网上有很多关于显卡的评论&#xff0c;阅读它们以了解特定卡的性能如何…
阅读更多...
SuperMap GIS基础产品桌面GIS FAQ集锦（5）

SuperMap GIS基础产品桌面GIS FAQ集锦（5）

SuperMap GIS基础产品桌面GIS FAQ集锦&#xff08;5&#xff09; 【iDesktop】【iDesktopX】态势推演怎么使用&#xff1f; 【解决办法】 1、要先新建一个CAD数据集&#xff0c;然后将标绘加到CAD数据集中。 2、再使用态势推演管理器&#xff0c;右键新建分组。 3、选中场景中的…
阅读更多...
ChatGPT会取代搜索引擎吗？BingChat、GoogleBard与ChatGPT区别

ChatGPT会取代搜索引擎吗？BingChat、GoogleBard与ChatGPT区别

目前暂时不会&#xff0c;ChatGPT为代表的聊天机器人很可能会直接集成到搜索中&#xff0c;而不是取代它。微软已经通过Bing Chat和Bing做到了这一点&#xff0c;它将“聊天”选项卡直接放入Bing搜索的菜单中。Google、百度也分别开始尝试通过其AI生成技术将Google Bard、文心一…
阅读更多...
十大排序——3.快速排序

十大排序——3.快速排序

这篇文章我们来介绍一下快速排序&#xff0c;主要分为&#xff1a;单边快排&#xff0c;双边快排&#xff0c;随机数基准点&#xff0c;算法优化四部分内容。 目录 1.快速排序的核心思想 2.具体实现方法 2.1单边循环&#xff08;lomuto分区&#xff09; 2.1.1单边循环&…
阅读更多...
这些录音转文字软件真好用，快来试试吧

这些录音转文字软件真好用，快来试试吧

我活了这么多年&#xff0c;最擅长的竟然是语音翻译&#xff0c;你们没想到吧&#xff01; 为什么我擅长语音翻译呢&#xff1f;事情是这样的&#xff1a; 以前我只要一上网课&#xff0c;就会心不在焉地错过许多重要的知识点&#xff0c;以至于学习成绩一落千丈。 在学会语…
阅读更多...
商品推荐系统浅析 | 京东云技术团队

商品推荐系统浅析 | 京东云技术团队

一、综述 本文主要做推荐系统浅析&#xff0c;主要介绍推荐系统的定义&#xff0c;推荐系统的基础框架&#xff0c;简单介绍设计推荐的相关方法以及架构。适用于部分对推荐系统感兴趣的同学以及有相关基础的同学&#xff0c;本人水平有限&#xff0c;欢迎大家指正。 二、商品…
阅读更多...
5G RedCap

5G RedCap

5G RedCap指的是3GPP所提出的5G标准。与之前发布的5G标准相比&#xff0c;功能更加精简。5G RedCap于2019年6月首次被纳入3GPP R17研究项目。 把一些不必要的功能去掉就可以带来模组价格的降低。背后的基本想法是&#xff1a;为物联网应用定义一种新的、不那么复杂的NR设备。 …
阅读更多...
自定义实现spring源码

自定义实现spring源码

目录 1.本文实现目标 2.自定义注解 3. 定义controller加上自定义的注释 4. 识别到这个注解 5.扫描目录&#xff0c;返回该目录下所有文件名&#xff08;全限定名&#xff09; 6.扫描该文件所在包中所有带这两个注解的类和方法放到map中 7.通过反射的方式创建实例 8.通过…
阅读更多...
【Java】智慧工地管理系统源码（SaaS模式）

【Java】智慧工地管理系统源码（SaaS模式）

智慧工地是聚焦工程施工现场&#xff0c;紧紧围绕人、机、料、法、环等关键要素&#xff0c;综合运用物联网、云计算、大数据、移动计算和智能设备等软硬件信息技术&#xff0c;与施工生产过程相融合。 一、什么是智慧工地 智慧工地是指利用移动互联、物联网、智能算法、地理信…
阅读更多...
汉字形近字（OCR）

汉字形近字（OCR）

近期做中文OCR识别的优化&#xff0c;抓破头皮却收获甚微。 为了百尺竿头更进一步&#xff0c;遂将目光聚焦在中文汉字特有的形近字和生僻字问题上&#xff0c;于是怒发整理形近字大全&#xff08;花了不少刀&#xff09;&#xff0c;希望对同行朋友们也有帮助&#xff1a; 地表…
阅读更多...
Vue + Cesium快速搭建（无需配置）

Vue + Cesium快速搭建（无需配置）

方式一&#xff1a;直接引入&#xff08;最简单&#xff09; 1.安装Cesium&#xff08;Vue搭建可以看我上一期的文章&#xff09; npm i cesium -save2.将node_modules\cesium\Build\Cesium文件夹拷贝到项目的public文件中 3.在public\index.html引入Cesium <!DOCTYPE h…
阅读更多...
把天气美景“搬”进HarmonyOS桌面里是种怎样的体验

把天气美景“搬”进HarmonyOS桌面里是种怎样的体验

近日&#xff0c;在HDC 2023大会上&#xff0c;HarmonyOS 4正式官宣。其中&#xff0c;全新的全景天气壁纸延续桌面天气组件、天气AOD熄屏显示便捷、易用等特点&#xff0c;为用户带来感受真实天气的视野体验&#xff0c;受到了广泛的关注。 日常中&#xff0c;多变的天气影响…
阅读更多...
【LeetCode】313. 超级丑数

【LeetCode】313. 超级丑数

313. 超级丑数 方法&#xff1a;“多路归并” 思路 这道题其实是 264. 丑数 II 的进阶&#xff0c;前者固定使用三个指针&#xff0c;分别对应于 2、3、5&#xff0c;而这道的primes数组长度不固定&#xff0c;因此使用指针数组来对应 primes 的每一个值。 第一个丑数一定是 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023