解决fixed定位问题,使用position定位,内容可滑动
<style type="text/css">
html, body{
padding: 0;
margin: 0;
height: 100%;
}
.header{
width: 100%;
position: absolute;
top: 0;
height: 60px;
line-height: 60px;
}
.content{
width: 100%;
background: pink;
position: absolute;
top: 60px;
bottom: 60px;
overflow: auto;
}
.footer{
width: 100%;
position: absolute;
bottom: 0;
height: 60px;
line-height: 60px;
}
</style>
<body>
<div class="main-wrapper">
<div class="header">头部</div>
<div class="content">
<p>内容</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
<p>哈哈哈哈哈哈哈哈哈哈</p>
</div>
<div class="footer">底部</div>
</div>
</body>
转载请注明原文地址:https://ipadbbs.8miu.com/read-11592.html