移动端，控制头部尾部固定
2017-07-18 09:25
239 查看
直接上代码：
用flex布局
<!DOCTYPE html>
<html>
<head>
<title>头尾部固定</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
display: -webkit-flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
font-size: 50px;
font-weight: bold;
}
header,footer{
height: 100px;
background-color: #20b;
line-height: 100px;
color: #fff;
}
.middle{
flex: 1;
}
</style>
<body>
<div class="container">
<header>头部</header>
<div class="middle">中间部分</div>
<footer>尾部</footer>
</div>
</body>
</html>效果图如下：
用flex布局
<!DOCTYPE html>
<html>
<head>
<title>头尾部固定</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.container{
display: flex;
display: -webkit-flex;
min-height: 100vh;
flex-direction: column;
text-align: center;
font-size: 50px;
font-weight: bold;
}
header,footer{
height: 100px;
background-color: #20b;
line-height: 100px;
color: #fff;
}
.middle{
flex: 1;
}
</style>
<body>
<div class="container">
<header>头部</header>
<div class="middle">中间部分</div>
<footer>尾部</footer>
</div>
</body>
</html>效果图如下：
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 移动端导航固定头部的fixed设置
- 固定头部和尾部，分页打印详细内容
- css头部和尾部固定，中间可以动态
- html页面 头部、尾部固定 中间可拖动效果
- table头部、尾部固定;中间内容定高自适应滚动
- flex盒模型实现头部尾部固定
- table头部、尾部固定;中间内容定高自适应滚动
- 头部和尾部固定中间自适应的布局
- IOS --- UITableView 表示图(头部和尾部)
- px4源码学习五--固定翼位置控制模块
- C#控制窗体在固定区域显示
- 给定一个固定长度的数组，将递增整数序列写入这个数组。当写到数组尾部时，返回数组开始重新写，并覆盖先前写过的数，请在这个特殊数组中找出给定的整数
- CSS控制DIV永远固定在页面底部
- Unity下使用暴风魔镜SDK通过头部和手柄控制字体拼凑
- vue移动端项目中返回上一路由页面、根据当前路由信息控制返回键的显示与隐藏
- Android 仿QQ首页的消息和电话的切换，首页的头部(完全用布局控制)
- 2_墨刀_移动端_实现下端导航条和右侧客服固定位置
- 面试题7：用两个栈实现队列，队列的声明如下，请实现它的两个函数appendTail和deleteHead， 分别完成在队列尾部插入结点和在队列头部删除节点的功能。
- 单链表的建立(头部延长、尾部延长)、插入操作、删除操作（无头结点的删除、有头结点的删除）
- Android 固定头部的ListView以及下拉刷新(附源码)