CSS完成纵向类似双飞翼布局，中间为固定滚动条容器

最新推荐文章于 2024-01-17 15:04:35 发布

AzeShinja

最新推荐文章于 2024-01-17 15:04:35 发布

阅读量261

点赞数

分类专栏： CSS 文章标签： css css3 flex html

本文链接：https://blog.csdn.net/AzeShinja/article/details/118724188

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客探讨了如何使用CSS flex布局创建一个具有固定头部和尾部的中间滚动内容区域。通过设置特定的flex属性和min-height，可以避免布局被拉伸过长，实现内容区域的自适应滚动。关键在于父容器的min-height属性，它确保了中间部分在内容不足时不会拉伸整个布局，同时保持头部和尾部的固定位置。博客作者详细解释了各个CSS代码段的作用，并展示了没有min-height属性时的布局问题。

摘要由CSDN通过智能技术生成

先上效果图
在这里插入图片描述

头部的CSS代码：

        width: 100%;
        height: 38px;
        flex: 0 0 38px;
        margin-top: 20px;
        line-height: 38px;
        opacity: 1;
        background: #f1f4f9;
        border-radius: 8px 8px 0px 0px;
        top: 10px;

尾部的CSS代码：

        width: 100%;
        flex: 0 0 52px;
        height: 52px;
        line-height: 52px;
        opacity: 1;
        background: #ffffff;
        border-radius: 0px 0px 16px 16px;
        box-shadow: 0px -1px 0px 0px rgba(226, 226, 234, 0.5);

中间部分的代码：

        flex: 1;
        overflow: overlay;

重点父容器中的flex布局样式：

      display: flex;
      flex-direction: column;
      // 这个属性十分重要， 如果没有此属性那么下面的父容器会特别高， 虽然达到了中间自适应的效果，
      但是无法做到中间容器滚动上下固定的效果
      min-height: 10px;