火狐浏览器flex布局height: 100%和overflow问题解决方案

最新推荐文章于 2023-02-11 10:24:06 发布

zc的救赎

最新推荐文章于 2023-02-11 10:24:06 发布

阅读量2k

点赞数 2

分类专栏：前端项目开发问题笔记文章标签： css flex height: 100% overflow

本文链接：https://blog.csdn.net/qq_28506819/article/details/102502810

版权

前端项目开发问题笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

事情描述：希望有一个页面布局，头部高度不动，内容区域可以随着外围区域变化自动填充剩余的空间，在内容区域内有一个滚动的div可以自适应内容区域的高度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .flex {
            width: 300px;
            height: 500px;
            display: flex;
            flex-direction: column;
        }
        .header {
            flex: 0 0 auto;
            height: 50px;
            background-color: red;
        }
        .content {
            flex: 1 1 auto;
        }
        .wrap {
            overflow: auto;
            height: 100%;
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="flex">
        <div class="header"></div>
        <div class="content">
            <div class="wrap">
                <div style="height: 1000px; background-color: gray;"></div>
            </div>
        </div>
    </div>
</body>
</html>

后来发现.wrap中滚动条没有出现，父容器被撑开了，如图所示
在这里插入图片描述
原因是.wrap没有继承到.content的高度，只要给.content设置height: 0就可以了。

.flex {
            width: 300px;
            height: 500px;
            display: flex;
            flex-direction: column;
        }
        .header {
            flex: 0 0 auto;
            height: 50px;
            background-color: red;
        }
        .content {
            flex: 1 1 auto;
            height: 0;
        }
        .wrap {
            overflow: auto;
            height: 100%;
            background-color: green;
        }

结果如下
在这里插入图片描述

zc的救赎

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
火狐浏览器flex布局height: 100%和overflow问题解决方案

事情描述：希望有一个页面布局，头部高度不动，内容区域可以随着外围区域变化自动填充剩余的空间，在内容区域内有一个滚动的div可以自适应内容区域的高度。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title&g...
复制链接

扫一扫