程序员经验分享-hwhale

【直接收藏】分享 42 个常用前端布局方案

2023-10-26

对 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 的元素，可以通过为其父元素设置t ext-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. 行内块级水平垂直居中方案

步骤如下：

  • 容器元素行高等于容器高度

  • 通过 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;
}
 

2. 定位实现水平垂直居中方案(一)

步骤如下：

  • 使子元素相对于容器元素定位

  • 子元素开启绝对定位

  • 设置该元素的偏移量，值为50% 减去宽度/高度的一半

实现CSS代码如下：

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

3. 定位实现水平垂直居中方案(二)

步骤如下：

  • 使子元素相对于容器元素定位

  • 子元素开启绝对定位

  • 设置该元素的偏移量，值为50%

  • 通过外边距-值的方式将元素移动回去

实现CSS代码如下：

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

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. 定位实现水平垂直居中方案(四)

步骤如下：

  • 使子元素相对于容器元素定位

  • 子元素开启绝对定位

  • 设置该元素的偏移量，值为50%

  • 通过 translate 反向偏移的方式，实现居中

实现 CSS 代码如下：

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

6. 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;
}

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()函数完成左列定宽右列自适应

步骤如下：

  • 左边列开启浮动

  • 右边列开启浮动

  • 右边列宽度为父级 100%减去左列的宽度

实现CSS代码如下：

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

2. float+margin-left完成左列定宽右列自适应

步骤如下：

  • 左边列开启浮动

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

实现CSS代码如下：

.left {
  /* 左边列开启浮动 */
  float: left;
}
.right {
  /* 通过外边距的方式使该容器的左边有200px */
  margin-left: 200px;
}

3. absolute+margin-left完成左列定宽右列自适应

步骤如下：

  • 开启定位脱离文档流

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

实现CSS代码如下：

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

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

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

步骤如下：

  • 左侧元素开始浮动

  • 右侧自适应元素设置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实现(一)

实现步骤：

  • 为了完成效果需要调整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;
}
 

2. 通过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;
}

3. 通过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;
}

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布局的步骤如下：

  • 设置最外层容器高度为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;
}

2. 使用calc函数实现

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

实现CSS代码如下：

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

3. Flex方案

实现步骤如下

  • 开启 flex 布局

  • 将子元素布局方向修改为垂直排列

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

  • 设置中间部分容器高度为自适应

实现CSS代码如下：

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

4. 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;
}
 

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;
}

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

css

前端

面试

【直接收藏】分享 42 个常用前端布局方案 的相关文章

  • CSS 术语：这些叫什么？

    考虑 p foo bar CSS 中这些语句的正确名称是什么 我见过它们被称为选择器 规则或规则集 但哪个是正确的 将考虑一条规则 p 本例中的选择器是 p 规则由选择器和声明组成 声明是property value所以整个规则是 sele

  • 在浮动元素周围放置边框

    假设我有类似以下代码的内容 我想在左右浮动的两个图像之间显示一些文本 img src testImage1 png alt Test Image 1 img src testImage2 png alt Test Image 2 p Tes

  • 透明

    从概念上讲 是否可以创建一个 div 显示内容 然后在内容上放置一个透明的 div 这样如果用户右键单击 gt 另存为 保存图像等 他们在执行此操作时将不会得到任何内容 是的 但它和 如果有人想复制您的内容 他们会

  • 在 div 内为

    添加下划线

    我正在尝试下划线h1 title 但由于某种原因它总是占用父 div 的整个长度 我能够做到这一点的唯一方法是添加position absolute CSS 中的属性 This is the design And this is what

  • 使用 CSS 检查滚动

    我正在尝试创建一个纯 100 CSS 无 jQuery 返回顶部 按钮 但我希 望该按钮仅在访问者向下滚动页面时显示 是否可以用 CSS 来检查这一点 因此 如果访问者向下滚动一点 则会显示 返回顶部 按钮 Thanks 根据光标位置确定

  • 调整容器 div 内部 div 的 margin-top 会将内部 div 和容器 div 从 body 向下推

    我觉得这一定是我做了一些愚蠢的事情的问题 但我无法弄清楚 这是显示我的问题的演示页面 http boxofbaskets com html demo html页面来源

  • 将 Angular 2 变量绑定到 css 伪类内容：attr() 表达式

    我想比较渲染 Angular 2 变量绑定的性能 innerText 将绑定变量作为伪类的内容 因为上面的方法强制元素重新渲染 然而 我很难尝试使角度标记与 css 一起工作 这样可行 CSS my el after content att

  • ngClassOdd/ngClassEven 未按预期工作

    使用 Angular 版本 1 2 15 我发现了一个错误 该错误似乎从版本 1 2 2 开始直到 1 2 15 重现 Plunker 演示 http plnkr co edit 3nExMtZ92AQS7BvLsQ8m p preview

  • 如何在 Angular 2 中动态更改 :host 中的 CSS？

    如何动态更改组件宿主的 CSS 属性 我有一个组件 在它的 CSS 中我给了它一个样式 host overflow x hidden 在子组件中单击按钮时 我需要添加overflow y hidden到主机组件 我如何实现这种行为 这是一个

  • JavaFX 中按下按钮的样式

    我有一个Button in my FXML文件 我在下面给它一个样式CSS button fx background color linear gradient ff5400 be1d00 fx background radius 30 f

  • div 上的背景图像未显示； div 正在折叠

    CSS body background url ninabg jpg left top no repeat background size 100 auto image background repeat no repeat backgro

  • CSS 的用户选择和可访问性

    如果我使用以下内容 webkit touch callout none webkit user select none khtml user select none moz user select none ms user select n

  • CSS 网格行垂直溢出其容器

    我想在页面上有一个网格布局 其中网格延伸到整个视口 并且行具有最小高度 最简单的示例是具有单个单元格的网格 请参见下面的代码片段 我遇到的问题是 当视口的高度小于定义的最小行高时 该行垂直溢出其容器 通过在下面的示例中添加红色和绿色边框 可

  • 使用CSS在矩形上画圈[关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我想设计一个类似于下图的形状 圆形和矩形之间的效果 我知道圆形是用设计的边界半径类似矩形的形状设计有一些具有风格的无序列表显示 块 但

  • 了解使用 Overflow:hidden 的内联块元素的换行行为

    我想要两个inline block元素保留在同一行 无论它们如何width or margin 快速解决方案是申请white space nowrap到容器 Flex 和 float 是同样有效的替代方案 我只是坚持找出特定的包装行为whi

  • 我被击败了 我只是想开发自己的画廊 但一开始我就失败了 在 a 中显示图像作为背景 div 我已经把我的代码颠倒了 搜索了网络 搜索了 stackoverflow 尽管我无法解决问题 这是我的代码 HTML PHP div class im

  • RegEx 从 CSS 背景样式中提取 URL

    我有一个这种形式的字符串 url http www example com imgs backgrounds bg80 jpg repeat scroll 10 0 transparent 这是来自某个元素的 CSS 样式 该元素目前在页面

  • 如何让我的 DIV 出现在另一个 DIV 下方

    我有这样的情况 div div div Div A 是 B 和 C 的全屏宽度容器 Div B 是一个小矩形 例如 100 x 200 px Div C 是另一个小矩形 例如 100 x 200 像素 现在发生的情况是 B 和 C 出现在同

  • 如何修复 iOS 11 和 macOS V10.12 Safari 上损坏的变换原点？

    我正在尝试使用 svg 来实现 CSS 动画 我期望 2 个 svg 盒子正在旋转 旋转 transform origin center center 360度 看起来它在 Chrome 和 Firefox 上的表现符合我的预期 但在 ma

  • 在CKEditor中，如何向按钮添加“文本”标签？

    editor ui addButton ImageUpload label Upload Image command popup image uploader icon this path images icon png 这就是我现在的代码

随机推荐

  • 我的个人博客

    经过几天鼓捣 我的个人博客终于建成了 为了提高网站安全性我把http协议升级成了https的 带有传输加密的协议能保证传输的安全而且可以防止篡改网站的网页 网站的访问速度也不能慢 为此我有花费了一些精力配置了CDN 现在通过https ww

  • es数据量过大，内存撑不住，关闭部分历史数据索引，以及备份删除索引

    关闭索引命令 curl XPOST http ip 9200 索引名称 close 恢复索引命令 curl XPOST http ip 9200 202205 open 遇到问题索引权限问题关闭失败 type cluster block e

  • 12.话题消息的定义与实现

    学习视频 https www bilibili com video BV1zt411G7Vn p 12 目标 消息的自定义 发布及订阅个人信息 一 自定义话题信息 1 定义msg文件 mkdir catkin ws src learning

  • OkHttp：基本使用详解

    简介 OkHttp是一个高效的HTTP客户端 它有以下默认特性 支持HTTP 2 允许所有同一个主机地址的请求共享同一个socket连接 连接池减少请求延时 透明的GZIP压缩减少响应数据的大小 缓存响应内容 避免一些完全重复的请求 当网络

  • TypeError: test_recharge() missing 1 required positional argument: ‘item‘

    提示test recharge 缺少一个必须的位置参数 item 说明是item有问题 debug后 发现item没有出现用例中的数据 再看是发现没有写 ddt 写上去就好了

  • CorelDraw X4 unable to load resource dll_七夕小子_新浪博客

    CorelDraw X4以前安装过 现在重新安装后 运行时 弹出几个对话框 Unable to load resource dll CRLUTLINTL dll Unable to load resourse DLL CrlCmnMappe

  • java中让控制台输出彩色字符的方法-Jansi

    在网上有很多类似的文章 教你如何在控制台输出彩色字符 其中比较好的方法是用别人的做好的包 Jansi 但是在网上很多的文章没有给出完整的操作过程 只是给出了方法 在这里将会有完整的过程 1 下载jnsi包 http maven outofm

  • 【报告分享】ChatGPT：AI模型框架研究.pdf（附下载链接）

    省时查报告 专业 及时 全面的行研报告库 省时查方案 专业 及时 全面的营销策划方案库 免费下载 2023年2月份热门报告合集 限时免费 ChatGPT4体验 无需翻墙直接用 ChatGPT团队背景研究报告 ChatGPT的发展历程 原理

  • Selenium基础用法

    目录 一 概念和自己的理解 二 安装 三 浏览器驱动 四 正真的基础上场 1 先要打开浏览器 打不开 我们后面也就做不了 万事开头先有前提 2 获取元素的方法 3 操作元素 4 浏览器操作 5 鼠标操作 6 键盘操作 7 下拉框操作 8 页

  • JDK 1.5 新特性

    文章目录 1 JDK 1 5 新特性 1 1 自动装箱和拆箱 1 1 1 什么是自动装箱和拆箱 1 1 2 自动装箱拆箱要点 1 1 3 自动装箱拆箱样例 1 1 4 自动装箱缺点 1 1 5 重载与自动装箱 1 1 6 自动拆装箱的缓存机

  • 【位图&&布隆过滤器&&海量数据面试题】

    文章目录 1 位图 2 布隆过滤器 1 位图 首先我们来看看一个腾讯的面试题 给40亿个不重复的无符号整数 没排过序 给一个无符号整数 如何快速判断一个数是否在这40亿个数中 分析 40亿个不重复整形数据 大概有160亿字节 也就是16GB

  • 数据结构单链表的创建以及简单操作

    在数据结构中 目录 一 数据节点类型结构体封装 二 创建单链表 1 创建链表 2 头部插入 3 遍历链表 4 尾部插入 5 释放链表 链表可以解决顺序表无法开辟连续空间的问题 大大提高了内存的利用率 这使我们在开发中不再局限于小型数据量的项

  • 开发岗校招求职攻略——面试准备（7.2胸有成竹-技术面技巧）

    1 前言 当你踏入面试房间的第一只脚开始 你的一举一动就都在面试官眼里和心里了 从最开始的自我介绍 到最后结束面试时的提问 都不能草率对待 下面 我根据技术面的几种常见面试形式 分别介绍一些特有的技巧 并且会在此基础上再额外介绍一些通用技巧

  • 查找已安装 npm 包的版本

    问 如何查找已安装的 node js npm 包的版本 这将打印 npm 本身的版本 npm v 这会打印一个神秘的错误 npm version 这会在注册表上打印软件包版本 即可用的最新版本 npm view version 如何获取已安

  • IDEA 连接 数据库

    IDEA 连接 数据库 一 首先确保数据库服务是打开的 使用 mysql u root p 连接数据库服务器 若不能进入到 mysql 里面则说明 没有启动服务器 使用 net start mysql 命令启动 如果 net start m

  • 攻防世界Web赛题记录

    Cat 题目 https adworld xctf org cn task answer type web number 3 grade 1 id 4658 page 2 Writeup 攻防世界 web Cat XCTF 4th WHCT

  • QT tabWidget样式表

    背景设置 QTabWidget pane border 1px solid rgba 125 250 250 160 border radius 3px background transparent 透明 margin top 1px cl

  • npm报错：xxx packages are looking for funding run `npm fund` for details（解决办法）

    报错信息 30 packages are looking for funding run npm fund for details 报错原因 这里是开发者捐赠支持的提示 打开一个github的链接之后 会显示是否需要打赏捐赠的信息 解决方案

  • LPDDR4 JEDEC标准测试实例解析--地址总线写操作

    说完DQ信号的读写测试 接下来 再来聊一聊命令及地址总线 CA Bus 的测试 由于CA bus只有一个信号流向 因此 只需要进行写操作的测试即可 如下图所示 为JEDEC标准中定义的CA相关的测试参数 接下来 将对测试项逐一进行解析 tC

  • 【直接收藏】分享 42 个常用前端布局方案

    对 CSS 布局掌握程度决定你在Web开发中的开发页面速度 随着Web技术的不断革新 实现各种布局的方式已经多得数不胜数了 本篇文章总结了四十二种CSS的常见布局 这四十二种布局可以细分为如下几类 水平居中 垂直居中 水平垂直居中 两列布局

热门标签