移動端常用布局
- 頭部、底部固定球昨，內(nèi)容滾動尔店。效果如下圖：
- 實(shí)現(xiàn)原理：
- 頭部、內(nèi)容主慰、底部為同一層級嚣州，頭部、底部子級元素添加固定定位fixed
- 給一個空標(biāo)簽設(shè)置高度共螺，解決fixed定位后導(dǎo)航欄遮蓋內(nèi)容的問題
或者給父級標(biāo)簽設(shè)置高度
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;
}
/* 給一個空標(biāo)簽設(shè)置高度该肴，解決fixed定位后導(dǎo)航欄遮蓋內(nèi)容的問題 */
.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>
<!-- 給一個空標(biāo)簽設(shè)置高度，解決fixed定位后導(dǎo)航欄遮蓋內(nèi)容的問題 或者 給 header 標(biāo)簽設(shè)置高度 -->
<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>
