CSS实现三栏自适应布局(两边固定,中间自适应)

绝对定位的元素会脱离文档流,它们是相对于包含块(通常是最近的具有相对定位、绝对定位或固定定位属性的父元素)进行定位的。当你把一个绝对定位的元素的高度设置为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>

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

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

技术解析:应对国内大流量攻击的新挑战与分布式清洗防御策略

近日&#xff0c;国内网络环境中出现的大流量攻击事件频发&#xff0c;且攻击规模呈指数级增长&#xff0c;部分攻击流量甚至超过了1.5Tbps。 这背后的主要原因是攻击者利用海外流量资源&#xff0c;通过复杂的网络技术和协议转换&#xff0c;将国际IPv4/IPv6流量巧妙伪装并转…

python篇---图片转成视频

python篇—图片转成视频 import cv2 import os# 设置图片文件夹路径和视频输出路径 image_folder /workspace/11 video_name output_video.mp4# 获取图片文件夹中的所有图片文件名&#xff0c;并按顺序排序 images [img for img in os.listdir(image_folder) if img.endswi…

C++的引用和内联函数,auto

什么是引用 引用就是取别名 可以给一个变量取多个别名,也可以给别名取别名 别名与本名拥有同一地址,对任意别名修改,也会同时修改其他别名和本名 引用的作用 引用的作用与指针重叠度很高 图中函数的参数int& a,int& b,a是x的别名,b是y的别名 则ab的交换就是xy的交…

怎么快速围绕“人、货、场”做零售数据分析?

做零售数据分析多了&#xff0c;不难发现零售数据分析的关键就是“人、货、场”&#xff0c;那么怎么又快又灵活地分析这三个关键点&#xff1f;不妨参考下奥威BI零售数据分析方案。 奥威BI零售数据分析方案是一套吸取大量项目经验&#xff0c;结合零售企业数据分析共性需求打…

【Java8新特性】四、强大的Stream api

​ 这里写自定义目录标题 一、了解Stream二、流(stream)到底是什么&#xff1f;三、Stream操作的三个步骤四、创建Stream的四种方式五、Stream 的中间操作1、筛选和切片2、map 映射3、排序 六、Stream 的终止操作1、查找和匹配2、归约3、收集 一、了解Stream Stream是Java8中…

同旺科技 USB TO SPI / I2C 专业版 极限测试 ---- 读取数据

所需设备&#xff1a; 1、USB 转 SPI I2C 适配器&#xff1b;内附链接 备注&#xff1a;带EXCEL调试的只适用于专业版&#xff1b; 软件配置&#xff1a; 设置如下&#xff0c;读取65500个字节&#xff0c;单条指令&#xff0c;速率20Mhz; 数据&#xff1a; 时钟信号&#…

了解 Python 中 gc.collect() 命令

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 在 Python 中&#xff0c;gc.collect() 命令是用于手动触发垃圾回收机制&#xff0c;以回收无法访问的对象所占用的内存。Python 的垃圾回收机制主要基于引用计数&#xff0c;辅以 “标记-清除” 和 “…

echarts坐标轴、轴线、刻度、刻度标签

坐标轴 x、y轴 x 轴和 y 轴都由轴线、刻度、刻度标签、轴标题四个部分组成。部分图表中还会有网格线来帮助查看和计算数据 普通的二维数据坐标系都有x轴和y轴&#xff0c;通常情况下&#xff0c;x轴显示在图表底部&#xff0c;y轴显示在左侧&#xff0c;一般配置如下&#xf…

【数据结构】树与森林(树的存储结构、森林与二叉树的转化、树与森林的遍历)

目录 树和森林树的存储结构一、树的双亲表示法&#xff1a;二、树的孩子表示法方法一&#xff1a;定长结点的多重链表方法二&#xff1a;不定长结点的多重链表方法三&#xff1a;孩子单链表表示法 三、树的二叉链表(孩子-兄弟)存储表示法 森林与二叉树的转换树和森林的遍历先根…

uni-app实现分页--(1)准备工作,首页下拉触底加载更多

实现流程如下: 分析&#xff1a;需要在滚动容器中添加滚动触底&#xff0c;在猜你喜欢中获取数据。难点&#xff1a;如何在父页面调用子组件内的方法。父组件中用ref&#xff0c;并定义组件实例类型&#xff0c;子组件中暴露方法 具体代码如下&#xff1a; 1.在父组件中添加…

计算机视觉——基于深度学习UNet实现的复杂背景文档二值化算法实现与模型训练

1. 引言 阈值分割可以被视为一个分类问题&#xff0c;通常涉及两个类别&#xff0c;这也是为什么阈值分割也被称为二值化。对于文档图像&#xff0c;我们期望阈值算法能够正确地将墨水分类为黑色&#xff0c;将纸张分类为白色&#xff0c;从而得到二值化图像。对于数字灰度图像…

【产品】ANET智能通信管理机 物联网网关 电力监控/能耗监测/能源管理系统

产品概述 本系列智能通信管理机是一款采用嵌入式硬件计算机平台&#xff0c;具有多个下行通信接口及一个或者多个上行网络接口&#xff0c;用于将一个目标区域内所有的智能监控/保护装置的通信数据整理汇总后&#xff0c;实时上传主站系统&#xff0c;完成遥信、遥测等能源数据…

【实战解析】YOLOv9全流程训练至优化终极指南

【实战解析】YOLOv9全流程训练至优化终极指南 0.引言1.环境准备2.数据预处理&#xff08;1&#xff09;数据准备&#xff08;2&#xff09;按比例划分数据集&#xff08;3&#xff09;xml转txt脚本&#xff08;4&#xff09;配置文件 3.模型训练&#xff08;1&#xff09;单GPU…

打开游戏缺少dll文件怎么办,dll文件一键修复方法

在我们日常操作电脑&#xff0c;经常会遇到各种各样的问题。比如想玩一会游戏的时候&#xff0c;电脑屏幕上却赫然弹出一则令人颇为扫兴的提示&#xff1a;“打开游戏缺少dll文件”。这个问题可能会让我们感到困惑和沮丧&#xff0c;但是幸运的是&#xff0c;有很多方法可以帮助…

电压继电器SRMUVS-220VAC-2H2D 导轨安装 JOSEF约瑟

系列型号&#xff1a; SRMUVS-58VAC-2H欠电压监视继电器&#xff1b;SRMUVS-100VAC-2H欠电压监视继电器&#xff1b; SRMUVS-110VAC-2H欠电压监视继电器&#xff1b;SRMUVS-220VAC-2H欠电压监视继电器&#xff1b; SRMUVS-58VAC-2H2D欠电压监视继电器&#xff1b;SRMUVS-100…

数据仓库与数据挖掘(第三版)陈文伟思维导图1-5章作业

第一章 概述 8.基于数据仓库的决策支持系统与传统决策支持系统有哪些区别&#xff1f; 决策支持系统经历了4个阶段。 1.基本决策支持系统 是在运筹学单模型辅助决策的基础上发展起来的&#xff0c;以模型库系统为核心&#xff0c;以多模型和数据库的组合形成方案辅助决策。 它…

如何监控容器或K8s中的OpenSearch

概述 当前 OpenSearch 使用的越来越多, 但是 OpenSearch 生态还不尽完善. 针对如下情况: 监控容器化或运行在 K8s 中的 OpenSearch 我查了下, 官方还没有提供完备的方案. 这里如何监控 K8s 中的 OpenSearch, 包括安装 exporter 插件、采集、展示全环节。 OpenSearch 简介…

2017NOIP普及组真题 4. 跳房子

线上OJ&#xff1a; 一本通&#xff1a;http://ybt.ssoier.cn:8088/problem_show.php?pid1417\ 核心思想 首先、本题中提到 “ 至少 要花多少金币改造机器人&#xff0c;能获得 至少 k分 ”。看到这样的话语&#xff0c;基本可以考虑要使用 二分答案。 那么&#xff0c;本题中…

用vue3写一个AI聊天室

效果图如下&#xff1a; 1、页面布局&#xff1a; <template><div class"body" style"background-color: rgb(244, 245, 248); height: 730px"><div class"container"><div class"right"><div class"…

如何用electron(vue)搜索电脑本地wifi

对于搜索本地 WiFi 网络&#xff0c;可以使用 Electron 结合 Node.js 来编写一个简单的应用程序。 以下是一个基本的示例&#xff0c;它使用 Node.js 的 wifi 模块来搜索并列出附近的 WiFi 网络&#xff1a; 首先&#xff0c;确保你已经安装了 Node.js 和 Electron。 然后&am…