上下定高中间自适应_上下固定中间自适应布局

1. 使用绝对定位

对这三栏都实现绝对定位，其中中间绝对定位的位置是上下两栏的高度，内容超出则中间部分出现流动条；

代码实现：

绝对定位实现

html,body,div{

padding:0;

margin:0;

}

.header{

position:absolute;

top:0; /*头部绝对定位位置*/

height:100px;

width:100%;

background: red;

}

.footer{

position:absolute;

bottom:0;/*尾部绝对定位位置*/

height:100px;

width:100%;

background:yellow;

}

.main{

position:absolute;

width:100%;

top:100px; /*中间自适应部分绝对定位位置，top是头部的高度*/

bottom:100px; /*bottom是尾部的高度*/

background: #ccc;

overflow:auto; /*超出的部分，滚动条显示*/

}

我是头部

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是中间自适应
我是中间自适应
我是中间自适应
我是中间自适应

我是尾部

2. 使用flex布局

还可以使用flex布局实现这一布局，将flex-direction设置为column，定义排列方向为竖排，还需注意的是要定义页面的整体高度为100%

flex布局实现

html,body{

padding:0;

margin:0;

height:100%; /*定义页面整体高度为100%，重要*/

}

.container{

display:flex; /*父元素的定义为flex布局*/

height:100%; /*这里也要定义，重要*/

width:100%;

flex-direction: column; /*定义排列方向为竖排*/

}

.header{

height:100px; /*头部固定高度*/

background: red;

}

.footer{

height:100px; /*尾部固定高度*/

background: yellow;

}

.main{

background: #ccc;

flex:1; /*中间分配剩下的所有空间*/

overflow:auto;

}

我是头部

我是flex布局实现的中间自适应
我是flex布局实现的中间自适应

我是尾部

上下定高中间自适应_上下固定中间自适应布局相关推荐

三列布局-中间固定俩边自适应-和两边固定中间自适应布局
中间固定俩边自适应 1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8" ...
antd option宽度自适应_前端基础：自适应布局之rem布局基础
Wowoy:https://juejin.im/post/5de72b1f51882512360d3910 开启一个移动端项目的基础,首先是想好如何在代码中实现移动端适配.之前没有经验,第一个项目里简 ...
上下定高中间自适应_移动端布局上下固定中间自适应
第五步:完整代码百度经验 *{ margin: 0; padding: 0; } html,body{height:100%;} body{ font-family: 微软雅黑; backgroun ...
上下定高中间自适应_联合首发|医药供应链平台一块医药获新一轮融资，赋能产业上下游提质增效...
创业邦获悉,近日,致力于医药供应链领域的「一块医药」刚刚完成新一轮融资,本轮融资由红杉中国种子基金领投,老股东心元资本.德迅投资.梅花天使创投跟投.联合创始人&CFO何雨表示,本轮融资将主要用 ...
上下定高中间自适应_css经典布局——头尾固定高度中间高度自适应布局
今天说说一个经典布局:头尾固定高度中间高度自适应布局! 相信做过后台管理界面的同学,都非常清楚这个布局.最直观的方式是框架这个我不想多写费话,因为我们的重心不在这里.如果有不了解的同学可以百度.goo ...
上下定高中间自适应_ADAS|驾驶辅助系统之自适应灯光照明系统
车灯是汽车的关键部位之一.汽车灯光的影响已经成为与道路安全驾驶密切相关的原因之一.AFS是近年来发展起来的一种新型智能照明系统,它使照明的有效覆盖范围更广,增加了汽车的安全性.随着道路和天气条件的变化 ...
bootstrapt 表格自适应_好用的自适应表格插件-bootstrap table （支持固定表头）
最近工作中找到了一款十分好用的表格插件,不但支持分页,样式,搜索,事件等等表格插件常有的功能外,最主要的就是他自带的冻结表头功能,让开发制作表格十分容易,不过网上大多都是英文文档,第一次使用会比较麻烦 ...
常见的网站布局方式---左固定右自适应、左右固定中自适应等
偶尔看到的一篇博文,觉得挺有用的,刚好前两天做项目的时候自己也遇到这个问题,觉得解决方案很好,所以搞过来,大家一起学习一起进步! 左边定宽.右边自适应(类似管理台) 方案一左边设置左浮动,右边宽度设 ...
input自适应_深度残差网络+自适应参数化ReLU（调参记录18）Cifar10~94.28%
本文在调参记录17的基础上,将残差模块的数量增加到27个.其实之前也这样做过,现在的区别在于,自适应参数化ReLU激活函数中第一个全连接层中的神经元个数设置成了特征通道数量的1/16.同样是在Cifa ...

上下定高中间自适应_上下固定中间自适应布局

上下定高中间自适应_上下固定中间自适应布局相关推荐

最新文章

热门文章

上下定高 中间自适应_上下固定中间自适应布局

上下定高 中间自适应_上下固定中间自适应布局相关推荐

最新文章

热门文章

上下定高中间自适应_上下固定中间自适应布局

上下定高中间自适应_上下固定中间自适应布局相关推荐