移动端固定头部底部,头部内容居中
转载局放在线监测光伏单板监测 ©著作权
*{
margin:0;
padding:0
}
body, html, .body{
height:100%;
width:100%;
}
.body{
display: flex;
flex-direction: column;
}
.box1{
display: flex;
justify-content: space-between;
align-items: center;
height:50px;
line-height:50px;
background:red;
color:#fff;
}
.content{
display: flex;
flex: 1;
overflow-y: auto;
}
.footer{
height:50px;
line-height: 50px;
background:blue;
text-align: center;
}
.header1, .header3{
width:10%;
vertical-align: middle;
line-height: 50px;
text-align: center;
}
.header2{
width:80%;
text-align: center;
}
html
<div class="body">
<div class="box1">
<div class="header1"><</div>
<div class="header2">容</div>
<div class="header3"></div>
</div>
<div class="content">内容</div>
<div class="footer">底部</div>
</div>
举报文章
请选择举报类型
内容侵权
涉嫌营销
内容抄袭
违法信息
其他
补充说明
0/200
上传截图
格式支持JPEG/PNG/JPG,图片不超过1.9M

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
Tensorflow Lite模型部署实战教程--YOLOV5移动端部署过程
Tensorflow Lite模型部署实战教程是一系列嵌入式Linux平台上的模型部署教程。????基于的硬件平台:i.MX8MPlus EVK????BSP版本:L5.10
tensorflow yolov5 部署 移动端 python -
解决vue移动端适配问题
1,先看看网上关于移动端适配讲解再聊移动端页面适配,rem和vw适配方案!
vue css 屏幕宽度 iphone -
开发移动端项目在真机上面的调试方法
我们很多朋友开发移动端的时候只知道在浏览器中开控制台(按F12就可以打开控制台了)然后点击小手机在浏览器中模拟手机,就像下面这样:但是并不知道如何在开发的过程中在手机上调试。只有上线后才通过下载软件或其他方式拿手机去看,或者搞个手机模拟器啥的连接,麻烦的一笔。我们今天就交给大家最简单的方法:启动你的项目将你启动后的项目连接copy下来查看你的本机IP(查看方法:查看本机IP的方法(...
开发移动端在真机调试方法 开发移动端 开发移动端如何在真机调试 开发移动端真机调试 真机调试最简单的步骤讲解 -
Microsoft Excel 教程,如何在 Excel 中合并和撤消合并单元格?
Microsoft Excel 教程,如何在 Excel 中合并和撤消合并单元格?
microsoft 苹果mac Microsoft Excel Excel -
干货|移动端App自动化之触屏操作自动化
干货|移动端App自动化之触屏操作自动化
控件 手势操作 android