flex 实现移动端上下固定，中间滑动

淩亂°似流年 2023-03-04 06:37 39阅读 0赞

如果你还在用position:fixed来保持移动端顶部、下部的导航栏在全局固定位置不动。

那你可以换种方法。更简单，方便，快捷；还不会受定位的影响。

不过注意，使用flex弹性布局的话，需要将设置flex的这个盒子所依赖的父标签的height有个固定的值，一般就是占满全局 `height:100%;`。

大师兄飞速写完的flex移动端布局小栗子：

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <style> body,html{ height: 100%; width: 100%; margin: 0; padding: 0; } .app{ height: 100%; width: 100%; display: flex; flex-direction: column; } .header{ height: 40px; background-color: orange; } .con{ background: aqua; overflow: auto; flex: 1; } .temp{ height: 200px; background: cornflowerblue; margin: 10px; } .footer{ background: blue; height: 50px; } </style>
    
    <body>
        <div class="app">
            <div class="header"></div>
            <div class="con">
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
                <div class="temp">111</div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
    
    </html>

![在这里插入图片描述][20200801164203374.gif]

别说，还挺好看。

[20200801164203374.gif]: /images/20230208/baf3b9b3813e4bb39e1f6a126b3bc856.png

发表评论取消回复

表情：

评论列表（有 0 条评论，39人围观）

还没有评论，来说两句吧...

相关阅读

相关 flex 实现移动端上下固定，中间滑动

如果你还在用position:fixed来保持移动端顶部、下部的导航栏在全局固定位置不动。那你可以换种方法。更简单，方便，快捷；还不会受定位的影响。不过注意，使用fle

淩亂°似流年/ 2023年03月04日 06:37/ 0 赞/ 40 阅读

相关 CSS3动画---移动端上下固定高度，中间自适应

问题描述：移动端，手机显示界面，需要头部高度10vh,底部高度10vh,中间的高度自适应；效果展示： ![在这里插入图片描述][watermark_type_

朱雀/ 2023年01月18日 04:13/ 0 赞/ 233 阅读

相关 css实现上中下布局（上下固定，中间自适应）

先上效果图： ![在这里插入图片描述][20210421001710245.gif] 实现方法：方法一：这个最简单，利用css中vh单位和calc() 函数

深藏阁楼爱情的钟/ 2023年01月14日 14:58/ 0 赞/ 183 阅读

相关移动端禁止页面滑动

var mo=function(e)\{e.preventDefault();\}; function stop()\{ document.

骑猪看日落/ 2022年06月07日 12:00/ 0 赞/ 300 阅读

相关移动端滑动

前言移动端，滑动是很常见的需求。很多同学都用过[swiper.js][]，本文从原理出发，实践出一个类swiper的滑动小插件[ice-skating][]。小插件

以你之姓@/ 2022年05月30日 08:45/ 0 赞/ 388 阅读

相关移动端上下左右滑动事件

注意：要用on方法 $(".activity\_goods").on("touchstart",'.activity\_goods\_left',function(e) \{

浅浅的花香味﹌/ 2022年05月15日 08:27/ 0 赞/ 373 阅读

相关移动端滑动删除

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdo

╰半夏微凉°/ 2022年03月14日 13:52/ 0 赞/ 347 阅读

相关原生 JS 实现移动端 Touch 滑动反弹

什么是 `Touch`滑动？就是类似于 `PC`端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到 `Touch`事件结合 `js`去实现，效果如下： ![154763

短命女/ 2022年01月29日 20:21/ 0 赞/ 312 阅读

相关【移动端】学习移动端的滑动手势事件

1.判断滑动的手势条件触发touchmove事件移动的超过一定的距离，如10px，像滑动了1px，2px这类的距离太小，不能视为滑动 <!DOCT

红太狼/ 2022年01月06日 12:23/ 0 赞/ 441 阅读

相关原生 js 实现移动端 Touch 滑动反弹

移动端 Touch 滑动反弹 > 什么是Touch滑动？就是类似于PC端的滚动事件，但是在移动端是没有滚动事件的，所以就要用到Touch事件结合js去实现，效果如下：

秒速五厘米/ 2021年07月04日 20:37/ 0 赞/ 452 阅读