上下固定中间自适应布局

最新推荐文章于 2024-08-21 12:08:59 发布
最新推荐文章于 2024-08-21 12:08:59 发布
阅读量1.5k 收藏 10
点赞数 9
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fxh200948140216/article/details/136076311
版权

实现上下固定中间自适应布局

1.通过position：absolute实现

定义如下结构

<body>

<div class="container">

<div class="top"></div>

<div class="center"></div>

<div class="bottom"></div>

</div>

</body>

style实现如下：

<style>
			body,
			html {
				width: 100%;
				height: 100%;
				background-color: yellow;
				margin: 0;
				padding: 0;
			}
			.container {
				height: 100%;
			}
			.top,
			.bottom {
				width: 100%;
				height: 100px;
				background-color: red;
			}
			.bottom {
				background-color: green;
			}

			.center {
				position: absolute;
				width: 100%;
				/* height: 100%; */
				/* margin-bottom: 100px; */
				top: 100px;
				bottom: 100px;
				background-color: aqua;
			}
		</style>

2.通过flex布局实现，父布局高度100%，display:flex;flex-direction: column;设置纵向排列，中间设置flex:1；具体实现如下：

<style>
			body,
			html {
				width: 100%;
				height: 100%;
				background-color: yellow;
				margin: 0;
				padding: 0;
			}
			.container {
				height: 100%;
				/* display: flex;
				flex-direction: column;
				width: 100%; */
			}
			.top,
			.bottom {
				width: 100%;
				height: 100px;
				background-color: red;
			}
			.bottom {
				background-color: green;
			}

			.center {
				position: relative;
				width: 100%;
				/* flex: 1; */
				height: 100%;
				/* margin-bottom: 100px; */
				/* top: 100px; */

				background-color: aqua;
			}
		</style>

华子Code1024
关注
实现上下固定中间自适应布局
sak1sm的笔记
06-11 508
常见移动端的整体布局，下面用绝对定位absolute和flex弹性布局实现 absolute 绝对定位 .header { position: absolute; top: 0; width: 100%; height: 100px; background: red; } .container { position: absolute; top: 100px; bottom: 100px; width: 100%; background: green; } .fo
flex实现上下固定中间自适应的三栏布局
weixin_43848807的博客
06-06 648
flex实现上下固定中间自适应的三栏布局
一列固定一列自适应布局-flex布局实现
you are what you read
08-13 7030
flex布局，弹性盒子布局。 声明了display:flex;即变为伸缩容器，在伸缩容器内的所有子元素将自动变成伸缩项目flex items. 常结合使用的属性有 dispaly:flex; flex-flow:row;  伸缩项目单行排列 或者flex-flow:column;  伸缩项目单列排列 这里利用flex布局实现一列固定，一列自适应 .parent{ width
【HTML】弹性盒子 (display: flex) 布局
最新发布
千里之行，始于足下
08-21 1608
容器属性：flex-direction (主轴的方向)，flex-warp (主轴的项目换行)，justify-content (项目在主轴上的对齐方式)，align-items (项目在交叉轴上的对齐方式)，align-content (项目在交叉轴上的对轴线对齐方式)；项目属性：order (排列顺序)，flex-frow (放大比例)，flex-shrink (缩小比例)，flex-basis (项目初始占据的主轴空间)，align-self (自己单个项目的交叉轴对齐方式)
html上下固定中间自适应div+css布局
09-03
html5新标签使用header、footer、nav、section布局，css设定及使用方法
CSS之布局系列--上中下布局(上下固定，中间自适应)--方法/实例
IT利刃出鞘的博客
11-28 8217
本文用示例介绍CSS三行布局的方案。 三行布局，即：上、中、下。有两种方案：1.上下固定，中间自适应；2.中间固定，上下自适应。本文介绍第1种方案。 两边固定，中间自适应，一共有如下几种方案： flex布局（推荐） 网格布局（grid) vh+calc() 表格布局（table）（不推荐） 绝对定位布局（不推荐） 上下固定，中间自适应，就意味着中间要占满。所以大部分方案中，其父元素都要设置：height: 100%
页面布局之上下固定中间自适应
喝牛奶的鱼
08-30 7430
常用的页面布局除了两边固定中间自适应和一端固定另一端自适应之外，还有上下固定中间自适应的布局，今天在这里做一下总结。 实现这种布局我主要通过两种方法： 使用绝对定位 对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条； 代码实现： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; ...
css经典布局——头尾固定高度中间高度自适应布局
weixin_34290390的博客
11-25 252
今天说说一个经典布局：头尾固定高度中间高度自适应布局！ 转文请标明 --- 出处：穆乙 http://www.cnblogs.com/pigtail/ 相信做过后台管理界面的同学，都非常清楚这个布局。最直观的方式是框架这个我不想多写费话，因为我们的重心不在这里。如果有不了解的同学可以百度、google。这里我不得不吐下槽！！ 百度实在让我这个“粉丝”失望。就目前情况来说，百度已经完全轮为...
flex 上下div固定, 中间div自适应
weixin_34019929的博客
06-01 1806
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; html,body{height:100%;margin: 0;
网页上中下三分布局即上下固定中间自适应
12-13
复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” ... <head> <!– 禁止浏览器从本地缓存中调阅页面。–> <...–网页不保存在缓存中，每次访问都刷新页面。...
上下定高 中间自适应_前端知识点之三栏布局 左右宽度固定 上下高度固定 中间自适应 几种解决办法...
weixin_39725594的博客
12-30 650
“题目：假设高度已知，请写出三栏布局，其中左、右栏的宽度为 300px，中间自适应”面试经常会遇到这样的一道题来考察对页面布局的基本功，相信大部分人都会想到通过 float 和绝对定位这两种方法来实现，但是想要在面试官面前得到更多的认可，还需要列举出更多的解决办法和优缺点：三栏布局 左右宽度固定 中间自适应 五种解决办法以下五种解决办法的公共样式/* 偷懒样式重置 */html * { margi...
flex布局实现上下固定，中间自适应
weixin_64105376的博客
08-23 1789
主要是针对上下固定，中间自适应
css实现上中下布局（上下固定，中间自适应）
闲云野鸟的博客
04-21 6685
先上效果图： 实现方法： 方法一： 这个最简单，利用css中vh单位和calc() 函数 使用场景： 页面布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width
(div+css)上下固定中间自适应高度网页布局的实现（FF,IE)
gxmark的专栏
09-20 6304
html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=utf-8" />title>上下固定中间自适应高度布局title>style type="text/css">    html    {     
flex布局实现上下固定高度，中间自适应布局
热门推荐
sinat_31680159的博客
07-29 1万+
flex布局实现上下固定高度，中间自适应布局 flex布局在实际开发中越来越常用，实现左右宽度或者上下高度固定，中间自适应的布局的实际需求也很常见。实现起来也很简单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>flex</title...
上下宽高固定，中间自适应布局
hugejihu9的专栏
12-04 599
文章来自：源码在线https://www.shengli.me/css/359.html             效果图：  
【HTML+CSS】之CSS布局
qq_37086980的博客
08-06 452
常用布局方式 table 表格布局 float 浮动 + margin inline-block 布局 flexbox布局 1.flexbox 布局 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewp
css实现上下固定中间自适应
weixin_45825917的博客
03-12 779
css
js首尾固定中间自适应布局
03-26
可以使用CSS的flex布局，将容器设置为flex布局，然后通过设置flex-grow属性使中间的内容自适应宽度，而固定的头部和尾部则可以设置固定宽度。 HTML结构： ```html <div class="header">Header ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

华子Code1024

您的认可与打赏是我创作的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值