- 在编写移动端时,会写顶部导航栏和底部固定在一定位置的情况,此时会使用position:fixed; (固定定位)使其固定在这个位置不会随着页面的滑动而移动.
- 但是此时会有新的问题出现,使用固定定位之后,该板块会脱离文档流,遮挡内容。
- 此时只要给文章内容加padding就可以解决
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
<head>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
background-color: #e8e8e8;
}
header{
width: 80%;
background-color: aqua;
position: fixed;
top: 0;
text-align: center;
line-height: 50px;
}
footer{
line-height: 50px;
background-color: aquamarine;
bottom: 0;
position: fixed;
/* 设置固定定位以后,原先的宽度便没有了,需要自己设置 */
width: 80%;
text-align: center;
}
main {
text-align: right;
/* 使用外边距 */
/* margin-top: 55px;
margin-bottom: 55px; */
/* 内边距也可以 */
padding-top: 50px;
padding-bottom: 55px ;
}
</style>
</head>
<body>
<header>
这是一个导航栏
</header>
<main>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
<p>pppppppppp</p>
</main>
<footer>
这是一个底部
</footer>
</body>
</html>
