当前位置： 首页 > news >正文

CSS实现三栏自适应布局（两边固定，中间自适应）

news 文章来源：https://blog.csdn.net/Niucode/article/details/137589266 2025/5/5 23:41:36

绝对定位的元素会脱离文档流，它们是相对于包含块（通常是最近的具有相对定位、绝对定位或固定定位属性的父元素）进行定位的。当你把一个绝对定位的元素的高度设置为100%时，它会相对于其包含块的高度来确定自己的高度。如果包含块是整个屏幕，那么这个绝对定位的元素设置为100%高度就会占满整个屏幕。

相反，float属性用于让元素浮动在其父元素内部，但是它不会使父元素的高度被撑开，因此，一个使用float的元素设置高度为100%并不会让它占满整个屏幕，因为float的元素仍然存在于父元素的文档流中，而并不会脱离文档流。

因此，通过绝对定位的元素设置高度为100%，可以让这个元素占满整个屏幕，而使用float的元素设置高度为100%则不能实现同样的效果，因为float元素并没有脱离文档流。

方法一、绝对定位（absolute + margin)

给左右两边的元素设置absolute，这样左右两边的元素脱离标准文档流的控制，中间的元素自然会上来，然后给中间的元素设置margin留出左右两边元素的位置。左右两边的元素放在前面可以不计较位置，但中间的元素必须放在最后，否则中间元素的margin设置会把左右两边元素顶到下面。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>/* 这里样式的初始化也很重要，不然有空隙 */* {margin: 0;padding: 0;}body {/* 为了使得中间的 div 能够自适应屏幕100%的高度，要这样设置 */height: 100vh;}.left,.right {/* 绝对定位的左右 div 是直接放在 body 元素中的，而 body 的高度会自动扩展以适应内容的高度，也可以通过设置 height: 100vh 让其填满整个视口高度（但只涉及左右div的时候没有必要），因为脱离了文档流，高度被设置为 100% 时，其定位的参考对象是 body 或者视口，所有可以占满整个屏幕。*/width: 200px;height: 100%;position: absolute;}.left {background-color: green;left: 0;}.right {background-color: blue;right: 0;}.center {/* 中间的 div 还在正常文档流布局中，没有脱离文档流，它现在的父元素是body，要是body没有设置显性高度值的话，那它的高度设置为 100% 是无效的。 */height: 100%;margin: 0 200px;background-color: red;}</style>
</head><body><div class="left">left</div><div class="right">right</div><div class="center">center</div>
</body></html>

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠 

方法二、自身浮动（float）

给左右元素分别设置左浮动和右浮动，之后给中间的元素设置margin，设置方法同方法一，三个div的顺序也和方法一的一样。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {height: 100vh;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;float: left;}.right {background-color: blue;float: right;}.center {height: 100%;margin: 0 200px;background-color: red;}</style>
</head><body><div class="left">left</div><div class="right">right</div><div class="center">center</div>
</body></html>

注：随着浏览器窗口缩小，右边元素会被挤到下一行 

方法三、圣杯布局（BFC+负margin） 

使用margin负值法，使用圣杯布局首先需要将中间元素用div包住，设置float使其形成一个BFC，并且要设置宽度，整个宽度和左边元素的margin负值要相互配合，也就是margin-left = "-中间元素外层div宽度" ，右边元素的margin负值要和它自己的宽度配合，也就是margin-left = “-右边元素宽度”。什么圣杯布局，就是拿中间元素当底，左右元素调整位置打配合。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {/* 这里依旧发挥着重要的作用 */height: 100vh;}.wrap {width: 100%;/* 这里的100%高度影响着center的高度 */height: 100%;float: left;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;float: left;margin-left: -100%;}.right {background-color: blue;float: left;margin-left: -200px;}.center {height: 100%;background-color: red;}</style>
</head><body><div class="wrap"><div class="center">center</div></div><div class="left">left</div><div class="right">right</div>
</body></html>

注：随着浏览器窗口缩小，会发生压缩，左右元素重叠，继续缩小之后右边元素会又会被挤到下一行，但是同方法二有不同。 

方法四、 flex布局

 将左中右三个元素用div包裹起来，给外层div设置display:flex，之后给中间元素设置flex:1，三个元素的顺序是固定的，中间元素要放在中间，不能兼容IE8及以下浏览器。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}body {/* 灵魂酱汁 */height: 100vh;}.wrap {width: 100%;height: 100%;display: flex;}.left,.right {width: 200px;height: 100%;}.left {background-color: green;}.right {background-color: blue;}.center {/* 灵魂酱汁 */flex: 1;height: 100%;background-color: red;}</style>
</head><body><div class="wrap"><div class="left">left</div><div class="center">center</div><div class="right">right</div></div>
</body></html>

注：随着浏览器窗口的缩小，会发生压缩，但是不会重叠和换行 

相关文章：

CSS实现三栏自适应布局（两边固定，中间自适应）

绝对定位的元素会脱离文档流&#xff0c;它们是相对于包含块&#xff08;通常是最近的具有相对定位、绝对定位或固定定位属性的父元素&#xff09;进行定位的。当你把一个绝对定位的元素的高度设置为100%时&#xff0c;它会相对于其包含块的高度来确定自己的高度。如果包含块是…...

编程日记 2024/4/11 11:17:16

MoCo 算法阅读记录

论文地址&#xff1a;&#x1f430; 何凯明大神之作&#xff0c;通过无监督对比学习预训练Image Encoder的表征能力。后也被许多VLP算法作为ITC的底层算法来使用。 一方面由于源代码本身并不复杂&#xff0c;但是要求多GPU分布式训练&#xff0c;以及需要下载ImageNet这个大规模…...

编程日记 2024/4/11 11:16:15

华为OD机试 - 数组连续和 - 滑动窗口（Java 2024 C卷 100分）

华为OD机试 2024C卷题库疯狂收录中&#xff0c;刷题点这里 专栏导读 本专栏收录于《华为OD机试&#xff08;JAVA&#xff09;真题&#xff08;A卷B卷C卷&#xff09;》。 刷的越多&#xff0c;抽中的概率越大&#xff0c;每一题都有详细的答题思路、详细的代码注释、样例测试…...

编程日记 2024/4/11 11:15:13

微店micro获得微店micro商品详情，API接口封装系列

微店商品详情API接口封装系列主要涉及注册账号、获取API密钥、选择API接口、发送请求以及处理响应等步骤。以下是详细的流程&#xff1a; 请求示例&#xff0c;API接口接入Anzexi58 一、注册账号并获取API密钥 首先&#xff0c;你需要在微店开放平台注册一个账号。注册成功后…...

编程日记 2024/4/11 11:13:11

C语言中的数据结构--链表的应用1（2）

前言 上一节我们学习了链表的概念以及链表的实现&#xff0c;那么本节我们就来了解一下链表具体有什么用&#xff0c;可以解决哪些实质性的问题&#xff0c;我们借用习题来加强对链表的理解&#xff0c;那么废话不多说&#xff0c;我们正式进入今天的学习 单链表相关经典算法O…...

编程日记 2024/4/11 11:11:09

.Net6 使用Autofac进行依赖注入

一、背景 刚接触.net 6&#xff0c;记录一下在.net6上是怎么使用Autofac进行动态的依赖注入的 二、注入方式 1、新建一个webapi项目&#xff0c;框架选择net 6 2、引用Nuget包---Autofac.Extensions.Dependency　　 3、在Program.cs上添加如下代码 //依赖注入 builder.Host.Us…...

编程日记 2024/4/11 11:10:07

第十二届蓝桥杯省赛真题（C/C++大学B组）

目录 #A 空间 #B 卡片 #C 直线 #D 货物摆放 #E 路径 #F 时间显示 #G 砝码称重 #H 杨辉三角形 #I 双向排序 #J 括号序列 #A 空间 #include <bits/stdc.h> using namespace std;int main() {cout<<256 * 1024 * 1024 / 4<<endl;return 0; } #B 卡片…...

编程日记 2024/4/11 11:07:04

DC40V降压恒压芯片H4120 40V转5V 3A 40V降压12V 车充降压恒压控制器

同步整流恒压芯片在现代电子设备中发挥着重要作用&#xff0c;为各种设备提供了稳定、高效的电源管理解决方案。 同步整流恒压芯片是一种电源管理芯片&#xff0c;它能够在不同电压输入条件下保持输出电压恒定。这种芯片广泛应用于各种电子设备中&#xff0c;如通讯设备、液晶…...

编程日记 2024/4/11 11:05:01

2、Qt UI控件 -- qucsdk项目使用

前言&#xff1a;上一篇文章讲了qucsdk的环境部署&#xff0c;可以在QDesigner和Qt Creator中看到qucsdk控件&#xff0c;这一篇来讲下在项目中使用qucsdk库中的控件。 一、准备材料 要想使用第三方库&#xff0c;需要三个先决条件&#xff0c; 1、控件的头文件 2、动/静态链…...

编程日记 2024/4/11 11:03:59

MATLAB算法实战应用案例精讲-【人工智能】AIGC概念三部曲（三）

目录 前言 算法原理 大模型 什么是AIGC？ AIGC和Chat GPT的关系 常见的AIGC应用...

编程日记 2024/4/11 10:58:53

外汇110：外汇交易不同货币类别及交易注意事项！

外汇市场是一个庞大而复杂的市场&#xff0c;其中有各种各样的货币品种。对于外汇投资者来说&#xff0c;了解外汇品种的特性和走势是比较重要的。1. 货币种类 外汇市场中的货币品种可以分为主要货币、次要货币和外围货币。 主要货币&#xff1a;主要指美元、欧元、英镑、日元、…...

编程日记 2024/4/11 10:57:51

gerrit 拉取失败

在浏览器gerrit的设置界面设置的邮箱地址和在命令行使用git config --gloable user.email设置的邮箱地址必须保持一致吗 在浏览器gerrit的设置界面设置的邮箱地址和在命令行使用git config --global user.email设置的邮箱地址并不一定需要保持一致。这两个邮箱地址是独立的&am…...

编程日记 2024/4/11 10:54:48

大数据行业英语单词巩固20240410

20240410 Communication - 沟通 Example: Effective communication is essential for project success. 有效的沟通对于项目的成功至关重要。 Collaboration - 协作 Example: Team collaboration is crucial in achieving our goals. 团队协作对于实现我们的目标至关重要。 …...

编程日记 2024/4/11 10:50:43

天软特色因子看板 (2024.4 第3期)

该因子看板跟踪天软特色因子A05005(近一月单笔流出金额占比(%)&#xff0c;该因子为近一月单笔流出金额占比(% 均值因子&#xff0c;用以刻画下跌时的 单成交中可能存在的抄底现象 今日为该因子跟踪第3期&#xff0c;跟踪其在SH000852 (中证1000) 中的表现&#xff0c;要点如下…...

编程日记 2024/4/11 10:49:42

使用QT 开发不规则窗体

使用QT 开发不规则窗体 不规则窗体贴图法的不规则窗体创建UI模板创建一个父类创建业务窗体main函数直接调用user_dialog创建QSS文件 完整的QT工程 不规则窗体 QT中开发不规则窗体有两种方法&#xff1a;&#xff08;1&#xff09;第一种方法&#xff0c;使用QWidget::setMask函…...

编程日记 2024/4/11 10:48:41

如何构建企业经营所需的商业智能（BI）能力

构建企业经营所需的商业智能&#xff08;BI&#xff09;能力是一项涉及诸多关键环节与细致考量的系统工程&#xff0c;通过科学的数据处理、分析与应用&#xff0c;赋能企业实现精准决策&#xff0c;提升运营效率&#xff0c;优化业务流程&#xff0c;并在竞争激烈的市场环境中…...

编程日记 2024/4/11 10:47:38

【vue】watch监听取不到this指向的数？

今天同事问我&#xff0c;watch里this指向的数值&#xff0c;别的地方却可以打印出来。工具也能看到数值&#xff0c;但打印出来却是undifined&#xff0c;先看看代码&#xff1a; 懒得打字了直接上截图吧 ps&#xff1a; 在Vue组件中&#xff0c;如果你在watch选项中访问this…...

编程日记 2024/4/11 10:46:37

Ubuntu-22.04安装VMware虚拟机并安装Windows10

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、VMware是什么&#xff1f;二、安装VMware1.注册VMware账号2.下载虚拟机3.编译vmmon&vmnet4.加载module5.安装bundle 三、安装Windows101.基础配置2.进阶…...

编程日记 2024/4/11 10:42:32

ELK企业日志分析系统介绍

前言 随着企业级应用系统日益复杂&#xff0c;随之产生的海量日志数据。传统的日志管理和分析手段&#xff0c;难以做到高效检索、实时监控以及深度挖掘潜在价值。在此背景下&#xff0c;ELK日志分析系统应运而生。本文将从ELK 日志分析系统的原理、架构及其在实践中的应用做相…...

编程日记 2024/4/11 10:39:28

在C#中读取写入字节流与读取写入二进制数据， 有何差异？

在C#中&#xff0c;读取和写入字节流与读取和写入二进制数据有些许不同&#xff0c;尽管它们在某些情况下可能会重叠使用。以下是它们之间的主要区别&#xff1a; 读取和写入字节流&#xff1a; 读取和写入字节流通常指的是处理文件或流中的原始字节数据。在C#中&#xff0c;可…...

编程日记 2024/4/11 10:37:26

数据库相关知识总结

一、数据库三级模式 三个抽象层次&#xff1a; 1. 视图层&#xff1a;最高层次的抽象&#xff0c;描述整个数据库的某个部分的数据 2. 逻辑层&#xff1a;描述数据库中存储的数据以及这些数据存在的关联 3. 物理层&#xff1a;最低层次的抽象&#xff0c;描述数据在存储器中时如…...

编程日记 2024/4/11 10:35:24

【汇编语言实战】输出数组中特定元素

C语言描述&#xff1a; #include <stdio.h> int main() {int a[]{1,2,3,4,5,6};printf("%d",a[3]); }汇编语言&#xff1a; include irvine32.inc .data arr dword 1,2,3,4,5,6 num dword 1 ;输出第二个元素 .code main proc mov esi,offset arr mov edx,nu…...

编程日记 2024/4/11 10:34:22

WordPress LayerSlider插件SQL注入漏洞复现(CVE-2024-2879）

0x01 产品简介 WordPress插件LayerSlider是一款可视化网页内容编辑器、图形设计软件和数字视觉效果应用程序，全球活跃安装量超过 1,000,000 次。 0x02 漏洞概述 WordPress LayerSlider插件版本7.9.11 – 7.10.0中，由于对用户提供的参数转义不充分以及缺少wpdb::prepare()，…...

编程日记 2024/4/11 10:33:21

MOS管的判别符号记忆与导通条件

参考链接 MOS管的判别与导通条件 (qq.com)https://mp.weixin.qq.com/s?__bizMzU3MDU1Mzg2OQ&mid2247520228&idx1&sn5996780179fbf01f66b5db0c71622ac3&chksmfcef6c86cb98e590e3d3734ee27797bdded17b6b648b3b0d3b1599e8a4496a1fa4e457be6516&mpshare1&…...

编程日记 2024/4/11 10:32:20

数据指标与经营智慧：构建有洞见的经营分析报告

经营分析报告不仅仅是数字的堆砌&#xff0c;它是企业运营状况的“晴雨表”&#xff0c;能够反映企业的健康状况和发展潜力。一个有洞见的经营分析报告能够帮助管理层识别问题、评估风险、发现机会&#xff0c;并据此制定相应的战略和行动计划。 关注【数据化运营圈】共同探讨…...

编程日记 2024/4/11 10:27:13

Spring 中类似 aBbb 单字母单词序列化与反序列问题

文章目录 前言代码准备问题排查lombok自定义生成 get、set 结合源码解析使用 lombok使用 lombok 自定义生成 user 对象 get、set 方法 如何解决使用注解 JsonProperty("aTest")自定义实现符合 Spring 规范的 get set 方法 个人简介 前言 最近在使用 spring boot mvc…...

编程日记 2024/4/11 10:26:12

TiDB 慢查询日志分析

导读 TiDB 中的慢查询日志是一项 关键的性能监控工具&#xff0c;其主要作用在于协助数据库管理员追踪执行时间较长的 SQL 查询语句。 通过记录那些超过设定阈值的查询&#xff0c;慢查询日志为性能优化提供了关键的线索&#xff0c;有助于发现潜在的性能瓶颈&#xff0c;优化…...

编程日记 2024/4/11 10:25:11

网页文件批量下载工具有哪些 网页文件批量下载工具推荐 IDM免费激活 网络下载加速器

把任务丢给软件&#xff0c;把时间还给自己&#xff0c;批量下载功能让下载变得更高效。它可以有效减少重复性操作&#xff0c;只需要一次简单的设置&#xff0c;就能把大量文件下载到电脑。有关网页文件批量下载工具有哪些&#xff0c;网页文件批量下载工具推荐的问题&#xf…...

编程日记 2024/4/11 10:22:04

嵌入式算法开发系列之图像处理算法

嵌入式系统中的图像处理算法及其应用 文章目录 嵌入式系统中的图像处理算法及其应用前言一、图像处理算法的原理二、图像处理算法的应用三、C 语言实现总结 前言 在嵌入式系统中&#xff0c;图像处理算法是一项重要的技术&#xff0c;用于实现各种视觉应用&#xff0c;如机器视…...

编程日记 2024/4/11 10:18:56

HarmonyOS4-ArkUI组件动画

一、ArkUI组件属性动画和显示动画 显示动画&#xff1a; 案例&#xff1a;上下左右箭头控制小鱼的游动 具体代码如下&#xff1a; import router from ohos.routerEntry Component struct AnimationPage {// 小鱼坐标State fishX: number 200State fishY: number 180// 小鱼…...

编程日记 2024/4/11 10:16:54