首页 > 其他分享 >头部和尾部固定中间自适应的布局

头部和尾部固定中间自适应的布局

时间:2023-01-28 17:34:34浏览次数:33  
标签:bottom 100% 布局 100px height 尾部 width 头部 top

<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>
<div class="con">
<div class="top"></div>
<div class="md">
ssssdfs
</div>
<div class="bottom"></div>
</div>

<style>
*{margin:0; padding:0;}
html,body,.con{height:100%;width:100%;height:100%;width:100%;}
div{position:absolute;}
.top,.bottom{width:100%;height:100px;z-index:5;}
.top{background:red;top:0;}
.bottom{background:black;bottom:0;}
.md{
width:100%;
background:#a7fad7;
overflow:auto;
top:100px;
bottom:100px;
position:absolute;
_height:100%;
_padding:100px 0;
_top:0;
}
</style>
</body>
</html>

天道酬勤



标签:bottom,100%,布局,100px,height,尾部,width,头部,top
From: https://blog.51cto.com/u_12304260/6025055

相关文章

  • C++Day12 虚拟继承内存布局测试
    测试一、虚继承与继承的区别1.1单个继承,不带虚函数1>classBsize(8):1>+---1>0|+---(baseclassA)1>0||_ia//4B1......
  • 移动端rem响应式布局开发
    移动端rem响应式布局开发rem是在移动WEBAPP开发中常用的长度单位rem为相对长度单位,相对于根元素(html元素)font-size计算值的倍数根元素(html元素)font-size的默认值为16......
  • Axure 辅助线--栅格化布局
    全局辅助线在所有页面都会显示,比如主页面是框架、子页面通过【内联框架】去加载,为了子页面的元件不偏移,可以创建创建全局辅助线页面辅助线......
  • flex布局 -- 弹性盒模型
    flex布局--弹性盒模型display:flex;就会让其变成弹性盒子当把一个元素的display属性设置为flex或者inline-flex后,它就成了一个容器。flex与inline-flex......
  • 各种不同几何形状布局布阵下的GDOP相对值图matlab仿真
    1.算法描述        全球四大导航卫星系统包括:美国GPS、俄罗斯GLONASS(格洛纳斯)、中国北斗和欧洲Galileo(伽利略)卫星系统。四大卫星定位系统靠卫星自身可以达到......
  • 三栏布局
    子绝父相+左left:0px右right:0px中间margin:width<style>.container{position:relative;height:600px;}......
  • 一文学会Flex布局
    参考:《CSS权威指南》(第四版)flex布局教程-语法篇-阮一峰1、Flex布局是什么FlexBox,弹性盒布局,顾名思义,就是元素具有弹性,能根据可用空间大小增减尺寸。2、基本概念......
  • 在linux下更换键盘布局
    作死中...想试试norman,但我用的是wayland,棺方官方的xkeymap用不了(实际在sway下是可以的只是当时我没发现)翻archwiki半天没找到方法,最后在fcitx5上发现了这个布局,果断换了......
  • 在SOUI中将自定义配置信息写到布局文件中
    SOUI的布局XML文件保存布局必须的信息。特定场合中,用户可能会需要在布局中指定业务需要处理的属性。比如启程输入法的皮肤。有的皮肤支持高分屏,有的皮肤不支持。对于这个......
  • 民营医院为何要搭建互联网医院系统,布局互联网医院远程在线医疗?
    互联网医院系统作为互联网医院的中坚力量,发挥着不可替代的作用,我们来看一下民营企业为何要搭建互联网医院系统呢?一是作为民营企业近三年来,线下门诊量相对来说会有一定缩减,营......