【CSS/HTML】圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现
前沿简介
圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。
圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。
两者的实现方式有差异，但是都遵循以下几点：
- 两侧宽度固定，中间宽度自适应
- 中间部分在DOM结构上优先，以便先行渲染
- 允许三列中的任意一列称为最高列
- 只需要使用一个额外的
<div>标签
圣杯布局
DOM结构
<div id="header"></div>
<div id="container"><div id="center" class="column"></div><div id="left" class="column"></div><div id="right" class="column"></div>
</div>
<div id="footer"></div>
主体由container包裹center、left、right三部分，其中的center在最前面，优先渲染。
CSS代码
假设左侧固定宽度200px,右侧固定宽度150px，在container上设置如下样式:
#container {padding-left: 200px;padding-right: 150px;
}
目的就是给左侧以及右侧预留出空间，得到如下示意图：
随后为左中右三列设置浮动与对应的宽度，同时为底部footer设置清除浮动。
#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px;
}#right {width: 150px;
}#footer {clear: both;
}
得到如下示意图效果：
由于center设置了宽度100%，所有左侧left跟右侧right被挤到了第二行。
如果要把left放到预留的位置，那么需要使用负外边距,代码如下：
#left {width: 200px; margin-left: -100%;
}
得到如下示意图效果：
由于margin-right: -100%占据叠到了center列左侧，那么需要用定位并且设置right的值为left列的宽度才能放到左侧预留的位置，代码如下：
#left {width: 200px;margin-left: -100%;position:relative;right: 200px;
}
这样后得到的示意图效果：
接下来对right列进行设置，代码如下：
#right {width: 150px;margin-right: -150px;
}
最终的示意图效果：
到这儿页面的基本样式完成。但是我们需要考虑页面的最小宽度，由于两侧有个固定宽度，感觉最小宽度就是200+150=350px,但是由于left列使用了定位position:relative,所以center列至少有个left设置的right值的宽度，即200px,所以最终的最小宽度是：200+150+200=550px。
body {min-width: 550px;
}
那么圣杯布局的整体CSS代码如下：
body {min-width: 550px;
}#container {padding-left: 200px; padding-right: 150px;
}#container .column {float: left;
}#center {width: 100%;
}#left {width: 200px; margin-left: -100%;position: relative;right: 200px;
}#right {width: 150px; margin-right: -150px;
}#footer {clear: both;
}
为了看到效果，贴一个完整示例代码，有模块的背景色：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style type="text/css">
html,body {margin: 0;padding: 0;height: 100%;
}
body {min-width: 550px;
}
#header,#footer {background: #4d4d50; height: 40px;
}
#container {padding-left: 200px;padding-right: 150px;height: calc(100% - 80px);
}
#container .column {float: left;
}
#center{width: 100%;height: 100%; background: #c3c3cd;
}
#left {width: 200px;position:relative;margin-left: -100%;right: 200px;background: #2e2eec;
}
#right {width: 150px;margin-right: -150px;background: #0adf23;
}
#footer{clear:both;
}
</style>
</head>
<body>
<div id="header"></div>
<div id="container"><div id="center" class="column">中间内容</div><div id="left" class="column">左侧内容</div><div id="right" class="column">右侧内容</div>
</div>
<div id="footer"></div>
</body>
</html>
双飞翼布局
DOM结构
<div id="header"></div>
<div id="container" class="column">
<div id="center"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
双飞翼布局的DOM结构与圣杯布局的区别是用container仅包裹住center，另外将.column类从center移至container上。
CSS代码
跟前面思路一样，设置各列宽度与浮动，为左右两列预留出空间，以及底部footer清除浮动，代码如下：
#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px;
}#right {width: 150px;
}#footer {clear: both;
}
将left放到预留位置左侧：
#left {width: 200px; margin-left: -100%;
}
将right放到预留位置右侧：
#right {width: 150px; margin-left: -150px;
}
最终计算页面的最小宽度：200+150=350px;虽然左侧没有用到定位，但是如果页面的宽度小于350px,那么会挤占中间center的宽度，故设置页面最小宽度为500px,代码如下：
body {min-width: 500px;
}
双飞翼布局的完整CSS代码：
body {min-width: 500px;
}#container {width: 100%;
}.column {float: left;
}#center {margin-left: 200px;margin-right: 150px;
}#left {width: 200px; margin-left: -100%;
}#right {width: 150px; margin-left: -150px;
}#footer {clear: both;
}
为了看到效果，也贴一个完整示例代码，有模块的背景色：
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>双飞翼布局</title>
</head>
<style>html,body {margin: 0;padding: 0;height: 100%;}body {min-width: 500px;}#header,#footer {background: #4d4d50;height: 40px;}#container {width: 100%;}#center {margin-left: 200px;margin-right: 150px;background: #c3c3cd;}.column {float: left;}#left{width: 200px;margin-left: -100%;background: #2e2eec;}#right {width: 150px;margin-left: -150px;background: #0adf23;}#footer {clear: both;}
</style>
<body>
<div id="header"></div>
<div id="container" class="column">
<div id="center">中间内容</div>
</div>
<div id="left" class="column">左侧内容</div>
<div id="right" class="column">右侧内容</div>
<div id="footer"></div>
</body>
</html>
扩展实现
如果去掉额外添加的<div>标签,也能实现相同的布局。
DOM结构变化为如下：
<div id="header"></div>
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>
基于双飞翼布局的实现思路，只需要在center上做出修改。
1.使用calc()
.column {float: left;
}
#center {margin-left: 200px;margin-right: 150px;width: calc(100% - 350px);
}
#left{width: 200px;margin-left: -100%;
}
#right {width: 150px;margin-left: -150px;
}
#footer {clear: both;
}
2.使用border-box
.column {float: left;
}#center {padding-left: 200px;padding-right: 150px;box-sizing: border-box;width: 100%;
}
需要注意的是：由于padding是盒子的一部分，所以padding部分会具有中间栏的背景色，当中间栏高于侧栏时，会出现中间背景色出现在侧栏下面中。
3.使用flex
DOM结构如下：
<!-- DOM结构 -->
<div id="container"><div id="center"></div><div id="left"></div><div id="right"></div>
</div>
CSS代码：
#container {display: flex;
}
#center {flex: 1;
}
#left {flex: 0 0 200px;order: -1;
}
#right {flex: 0 0 150px;
}
参考地址：
- 《圣杯布局和双飞翼布局的理解与思考》
- 《CSS布局奇淫巧计之-强大的负边距》
相关文章：
【CSS/HTML】圣杯布局和双飞翼布局实现两侧宽度固定，中间宽度自适应及其他扩展实现
前沿简介 圣杯布局和双飞翼布局是前端重要的布局方式。两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局。 圣杯布局来源于文章In Search of the Holy Grail,双飞翼布局来源于淘宝UED。 两者的实现方式有差异，但是都…...
数据流和数据流处理技术
一数据流 首先明确数据流概念：数据流是连续不断生成的、快速变化的无界数据序列 数据流类型： 数据流大致可以分为四种类型 1.连续型数据流：不断地产生数据，数据稳定速度输入系统。 2.突发型数据流：在某特定时间或…...
（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案
系列文章目录 文章目录 系列文章目录一、（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案1.资料 一、（IDEA）spring项目导入本地jar包方法和项目打包时找不到引入本地jar包的问题解决方案 1.资料…...
解决TikTok无网络连接问题解析
随着社交媒体的快速发展，TikTok已成为全球用户最喜欢的短视频平台之一，吸引了数以亿计的用户。然而，在享受这个平台时，用户经常会遇到无网络连接的问题，这不仅影响观看体验，还可能导致无法上传内容或参与社…...
k8s中，ingress的实现原理，及其架构。
图片来源：自己画的 图片来源：k8s官网 首先，什么是ingress? 是服务还是控制器？ 都不精确 ingress是一个api资源 service和deployment也是api资源。 这几个相互协作，组建成一个对外提供服务的架构。 ingress提供的…...
【数据结构强化】应用题打卡
应用题打卡 数组的应用 对称矩阵的压缩存储 注意： 1. 2.上三角的行优先存储及下三角的列优先存储与数组的下表对应 上/下三角矩阵的压缩存储 注意： 上/下三角压缩存储是将0元素统一压缩存储，而不是将对角线元素统一压缩存储 三对角矩阵的…...
解决 MySQL 服务无法启动：failed to restart mysql.service: unit not found
目录 前言1. 问题描述2. 问题分析3. 解决步骤3.1 检查 MySQL 服务文件3.2 备份旧的服务文件3.3 启动 MySQL 服务3.4 验证服务状态 4. 总结结语 前言 在日常使用 MySQL 数据库时，有时候可能会遇到服务无法正常启动的问题。这类问题通常出现在系统更新或者服务配置文…...
Dubbo和Http的调用有什么区别
背景 我们在项目开发中，需要进行调用外部接口时，往往使用Dubbo和Http方式都能实现远程调用。那么他们在使用上，有什么区别呢？ 定位不同 一个是分布式环境下的框架，一个是通信协议。 Dubbo：是一种高性能的…...
ARM 架构、cpu
一、ARM的架构 ARM是一种基于精简指令集（RISC）的处理器架构. 1、ARM芯片特点 ARM芯片的主要特点有以下几点： 精简指令集：ARM芯片使用精简指令集，即每条指令只完成一项简单的操作，从而提高指令的执行效率…...
【React】入门Day03 —— Redux 与 React Router 核心概念及应用实例详解
1. Redux 介绍 // 创建一个简单的Redux store const { createStore } Redux;// reducer函数 function counterReducer(state { count: 0 }, action) {switch (action.type) {case INCREMENT:return { count: state.count 1 };case DECREMENT:return { count: state.count -…...
u2net网络模型训练自己数据集
单分类 下载项目源码 项目源码 准备数据集 将json转为mask json_to_dataset.py import cv2 import json import numpy as np import os import sys import globdef func(file):with open(file, moder, encoding"utf-8") as f:configs json.load(f)shapes configs…...
登录功能开发 P167重点
会话技术： cookie jwt令牌会话技术： jwt生成： Claims：jwt中的第二部分 过滤器： 拦截器： 前端无法识别controller方法，因此存在Dispa什么的...
数据架构图：从数据源到数据消费的全面展示
在这篇文章中，我们将探讨如何通过架构图来展示数据的整个生命周期，从数据源到数据消费。下面是一个使用Mermaid格式的示例数据架构图，展示了数据从源到消费的流动、处理和存储过程。 数据架构图示例 说明 数据源：分为内部数据源&…...
useEffect 与 useLayoutEffect 的区别
useEffect 与 useLayoutEffect 的区别 useEffect和useLayoutEffect是处理副作用的React钩子函数，有以下区别1. 执行时机不同2. 对性能影响不同3. 对渲染的影响不同：4. 使用场景不同 使用建议 useEffect和useLayoutEffect是处理副作用的React钩子函数&…...
OPENCV判断图像中目标物位置及多目标物聚类
文章目录 在最近的项目中，又碰到一个有意思的问题需要通过图像算法来解决。就是显微拍摄的到的医疗图像中，有时候目标物比较偏，也就是在图像的比较偏的位置，需要通过移动样本，将目标物置于视野正中央，然后再…...
分布式理论：拜占庭将军问题
分布式理论：拜占庭将军问题 介绍拜占庭将军的故事将军的难题 解决方案口信消息型拜占庭问题之解流程总结 签名消息型拜占庭问题之解 总结 介绍 拜占庭将军问题是对分布式共识问题的一种情景化描述，由兰伯特于1082首次发表《The Byzantine Generals Prob…...
从零开始Ubuntu24.04上Docker构建自动化部署（三）Docker安装Nginx
安装nginx sudo docker pull nginx 启动nginx 宿主机创建目录 sudo mkdir -p /home/nginx/{conf,conf.d,html,logs} 先启动nginx sudo docker run -d --name mynginx -p 80:80 nginx 宿主机上拷贝docker上nginx服务上文件到本地目录 sudo docker cp mynginx:/etc/nginx/ngin…...
阿里云 SAE Web：百毫秒高弹性的实时事件中心的架构和挑战
作者：胡志广(独鳌) 背景 Serverless 应用引擎 SAE 事件中心主要面向早期的 SAE 控制台只有针对于应用维度的事件，这个事件是 K8s 原生的事件，其实绝大多数的用户并不会关心，同时也可能看不懂。而事件中心，是希望能够…...
人口普查管理系统基于VUE+SpringBoot+Spring+SpringMVC+MyBatis开发设计与实现
目录 1. 系统概述 2. 系统架构设计 3. 技术实现细节 3.1 前端实现 3.2 后端实现 3.3 数据库设计 4. 安全性设计 5. 效果展示 编辑编辑 6. 测试与部署 7. 示例代码 8. 结论与展望 一个基于 Vue Spring Boot Spring Spring MVC MyBatis 的人口普查管理…...
使用VBA快速将文本转换为Word表格
Word提供了一个强大的文本转表格的功能，结合VBA可以实现文本快速转换表格。 示例文档如下所示。 现在需要将上述文档内容转换为如下格式的表格，表格内容的起始标志为。 示例代码如下。 Sub SearchTab()Application.DefaultTableSeparator "*&quo…...
练习（含atoi的模拟实现,自定义类型等练习）
一、结构体大小的计算及位段 （结构体大小计算及位段 详解请看：自定义类型：结构体进阶-CSDN博客） 1.在32位系统环境，编译选项为4字节对齐，那么sizeof(A)和sizeof(B)是多少？ #pragma pack(4)st…...
相机Camera日志实例分析之二：相机Camx【专业模式开启直方图拍照】单帧流程日志详解
【关注我，后续持续新增专题博文，谢谢！！！】 上一篇我们讲了： 这一篇我们开始讲： 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下： 一、场景操作步骤 操作步…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
QT： `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中，将 long long 类型转换为 QString 可以通过以下两种常用方法实现： 方法 1：使用 QString::number() 直接调用 QString 的静态方法 number()，将数值转换为字符串： long long value 1234567890123456789LL; …...
Redis数据倾斜问题解决
Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中，部分节点存储的数据量或访问量远高于其他节点，导致这些节点负载过高，影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...
Rapidio门铃消息FIFO溢出机制
关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系，以下是深入解析： 门铃FIFO溢出的本质 在RapidIO系统中，门铃消息FIFO是硬件控制器内部的缓冲区，用于临时存储接收到的门铃消息（Doorbell Message）。…...
C++使用 new 来创建动态数组
问题： 不能使用变量定义数组大小 原因： 这是因为数组在内存中是连续存储的，编译器需要在编译阶段就确定数组的大小，以便正确地分配内存空间。如果允许使用变量来定义数组的大小，那么编译器就无法在编译时确定数组的大…...
人工智能（大型语言模型 LLMs）对不同学科的影响以及由此产生的新学习方式
今天是关于AI如何在教学中增强学生的学习体验，我把重要信息标红了。人文学科的价值被低估了 ⬇️ 转型与必要性 人工智能正在深刻地改变教育，这并非炒作，而是已经发生的巨大变革。教育机构和教育者不能忽视它，试图简单地禁止学生使…...
排序算法总结（C++）
目录 一、稳定性二、排序算法选择、冒泡、插入排序归并排序随机快速排序堆排序基数排序计数排序 三、总结 一、稳定性 排序算法的稳定性是指：同样大小的样本 **（同样大小的数据）**在排序之后不会改变原始的相对次序。 稳定性对基础类型对象…...
【C++】纯虚函数类外可以写实现吗？
1. 答案 先说答案，可以。 2.代码测试 .h头文件 #include <iostream> #include <string>// 抽象基类 class AbstractBase { public:AbstractBase() default;virtual ~AbstractBase() default; // 默认析构函数public:virtual int PureVirtualFunct…...