弹性布局flex实现移动端“头尾固定，中间区域滑动”效果

最新推荐文章于 2024-04-07 17:10:57 发布

原创最新推荐文章于 2024-04-07 17:10:57 发布 · 1.8k 阅读

13 ·

CC 4.0 BY-SA版权

Flex弹性布局专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何利用弹性布局（Flex）在移动端实现‘头尾固定，中间区域滑动’的效果，以解决传统固定布局在不同设备上可能出现的问题。通过设置html, body及最外层容器高度为100%，并为中间内容区域添加特定的flex样式，可以实现这一布局。参考链接提供了更多关于Flex布局的详细讲解。" 110188826,9403803,Anaconda安装selenium超时问题解决,"['anaconda', 'python', '包管理', '网络问题', '安装教程']

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

头尾固定，中间区域可以滑动效果是移动端最常见的效果，以京东页面为例。以前开发时常用的方法是用固定布局position:fixed;实现，但是该方法在ios上或者其他机型上会出现问题。现在，可以用flex方法快速实现该布局。

在这里插入图片描述
html:

<body>
    <div class="flex-wrap">
        <div class="header">Header</div>
        <div class="cont">
            中间内容区域
        </div>
        <div class="footer">Footer</div>
    </div>
</body>

css:

html,
body {
    width: 100%;
    height: 100%;
}

.flex-wrap {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.flex-wrap .header,
.flex-wrap .footer {
    height: 40px;
    background: lime;
}

.flex-wrap .cont {
    flex: 1;
    overflow: scroll;
    background: red;
}