1.把需要固定定位的拆分出来,单独的一层
2.需要滚动的单独一层
3.看到最后
需要滚动的
height: 100%;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
bottom: 2px;
overflow-y: scroll;
width: 100%;
height: auto;
-webkit-overflow-scrolling: touch;
固定定位:
position: fixed;
bottom: 0;
left: 0;
right: 0;
display: flex;
justify-content: space-around;
text-align: center;
align-items: center;
height: 98px;
background: #fff;
但是这个有一个不好的地方是,写好的pc端其他页面会很乱(虽然是做移动端的,但是pc也不能乱)
一个更好的方式是:单独抽出来后,改需要滚动的内容而已,(需要把body,html设置的overflow去掉,给需要的地方加上,其实就是在内容的最外层包裹一层div,添加以下代码):
margin: 0 auto;
overflow-y: scroll;
width: 100%;
很诡异地解决了
本文介绍了一种有效的移动端网页布局方法,通过将需要滚动的内容与固定定位元素分离,并调整body和html的overflow属性,实现了平滑的滚动效果和良好的视觉体验。此方法特别适用于需要在小屏幕设备上展示大量内容的应用场景。
1089

被折叠的 条评论
为什么被折叠?



