移动端固定头部底部,头部内容居中
转载*{
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>
本文章为转载内容,我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题,欢迎原作者联系我们进行内容更正或删除文章。

提问和评论都可以,用心的回复会被更多人看到
评论
发布评论
相关文章
-
【CSS】头部尾部固定中间滚动
【CSS】头部尾部固定中间滚动
css html -
div固定顶部和底部
div固定 成功添加 添加 取消
HTML html css xml 3c -
装饰设计模式 - RecyclerView添加头部和底部
1.问题思考RecyclerView 我们都知道有一个比较麻烦的事,那就是没有提供可以直接添加底部和头部的功能。而在开发的过程中一定有这方面的需求,怎么解
设计模式 装饰者模式 装饰设计模式 ide 系统架构 -
kubernetes服务间调用 基于kubernetes的微服务
微服务架构被认为是构建大型复杂系统的最佳理论指导,其采用了分而治之、单一职责、关注点分离等方法论来设计系统架构。微服务的实现方式和思路有很多种,本文简述基于kubernetes的微服务平台建设思路及技术选型。应用架构发展历史要了解微服务架构提出的背景,首先我们来看一下应用架构的发展历程,如下图所示:单体应用:传统应用的开发技术为.NET、J2EE等技术,开发完成后部署在websphere、webl
kubernetes服务间调用 Spring Cloud Kubernetes Microservices Istio