移动端常用布局
- 头部、底部固定，内容滚动。效果如下图：
- 实现原理：
- 头部、内容、底部为同一层级，头部、底部子级元素添加固定定位fixed
- 给一个空标签设置高度，解决fixed定位后导航栏遮盖内容的问题
或者给父级标签设置高度
clipboard.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>移动端常用布局</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f7f8fa;
}
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
line-height: 56px; /* 这里也需要添加高度 */
background-color: #fff;
border-bottom: 1px solid #eee;
text-align: center;
}
/* 给一个空标签设置高度，解决fixed定位后导航栏遮盖内容的问题 */
.nav-placeholder {
height: 56px;
}
section {
background-color: #fff;
margin: 10px 0;
}
.cell {
padding: 10px 16px;
border-bottom: 1px solid #eee;
}
.footer-nav {
position: fixed;
left: 0;
bottom: 0;
right: 0;
z-index: 99;
line-height: 56px;
background-color: #fff;
border-top: 1px solid #eee;
display: flex;
}
.footer-nav div {
flex: 1;
text-align: center;
}
</style>
</head>
<body>
<header>
<!-- 固定定位 -->
<div class="nav">头部</div>
<!-- 给一个空标签设置高度，解决fixed定位后导航栏遮盖内容的问题 或者 给 header 标签设置高度 -->
<div class="nav-placeholder"></div>
</header>
<section>
<div class="cell">Content-start</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
<div class="cell">Content-end</div>
</section>
<footer>
<div class="footer-nav">
<div>首页</div>
<div>分类</div>
<div>我的</div>
</div>
<div class="nav-placeholder"></div>
</footer>
</body>
</html>
网友评论