flex上下固定中间滚动布局

关注

VIP免费原创最新推荐文章于 2025-03-20 12:01:19 发布 810 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。传统 pc 端中，子容器高度超出父容器高度，通常使用 overflow:auto 可出现滚动条拖动显示溢出的内容，而移动web开发中，由于浏览器厂商的系统不同、版本不同，导致有部分机型不支持对弹性滚动，从而在开发中制造了所谓的 BUG。

上图如果在PC端中，我们可以利用 position:fixed 和 overflow:auto 进行简单的布局实现我们需要的效果，而在手机端遇到的问题如下：

ios4 和 android2.2 以下不支持 position:fixed
ios 和 android2.3 以下不支持 overflow:auto
ios4 和 android 不支持 overflow-scrolling

最严重的结果是：滚动区域内容无法拖动

对于 ios4 和 android2.2 以下不支持 position:fixed 的问题，有2种布局方法可以替代。

布局一：定义页面整体高度为100%，然后使用 position:absolute 布局可解决

/*<!--absolute布局 [[ --><body><div class="wrap">    <div class="header">header</div>    <div class="main">     弹性滚动区域    </div>    <div class="footer">footer</div></div></body><!--absolute布局 ]] -->*/html,body{
   
   height:100%;}.wrap{
   
   width:100%;}.header,.footer{
   
   height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}.header