嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]

Posted

技术标签:

【中文标题】嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]【英文标题】:Nested Flexbox 100% Height Not Working in Safari [duplicate] 【发布时间】:2015-10-03 23:02:44 【问题描述】:

我是 Flexbox 的新手,我正在尝试使用它来创建具有固定页眉、固定页脚和填充页眉和页脚之间可用空间的内容区域的布局。内容区域是一个可滚动的区域,有 3 个面板(div),每个面板都有 100% 的高度。出于演示目的,我将 a、b、c(将它们称为面板 a、面板 b 和面板 c)文本放在每个面板的顶部。

在 Firefox v39 中,面板 a、b 和 c 占据了可滚动容器的整个高度。

在 Safari (v 8.0.6 (10600.6.3)) 中,每个面板的高度都比容器高一点。如果您滚动到最后一个面板(面板 c),当内容一直向下滚动时,标题“c”将不再显示。 Firefox 并非如此。

我想要的行为是 Firefox 中的行为。

这里是codepen。

<head lang="en">
    <meta charset="UTF-8">
    <title>Sample</title>
    <style>
        html, body 
            height: 100%;
            width: 100%;
            font-size: 100%;
            margin: 0px;
            font-family:open-sans;
            font-style: normal;
            font-weight: 400;
        
        *, *:before, *:after
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            -ms-box-sizing: border-box;
            box-sizing: border-box;

        
    </style>
</head>

<body>
    <div style="height: 100%; width: 100%; ;display: -webkit-flex; display: flex; -webkit-flex-flow: column;  flex-flow: column;">
        <div style="width:100%; min-height: 50px;">
            header<br>header<br>header<br>
        </div>
        <div style="display: -webkit-flex; display: flex; -webkit-flex-flow: column; flex-flow: column; width:100%; height: 100%; -webkit-flex: 1 1 auto; flex: 1 1 auto; -ms-flex: 1 1 auto; ">
            <div style="overflow-y: auto; width:100%; height: 100%; border:red solid thin">
                <div  style="width:100%; height: 100%; border:green solid thin">
                    a
                </div>
                <div style="width:100%; height: 100%; border:green solid thin">
                    b
                </div>
                <div style="width:100%; height: 100%; border:green solid thin">
                    c
                </div>
            </div>

        </div>
        <div style=" min-height:30px; border:blue solid thin;">
            footer
        </div>
    </div>
</body>

谢谢。

【问题讨论】:

那么你想要的行为是什么?火狐? 是的,我想要的行为是 FF。谢谢 【参考方案1】:

这里对 CSS 盒子模型的解释有点奇怪。我不愿说谁对谁错。但无论如何,诀窍是创建一个包含 a、b 和 c 的包装器,该包装器具有 position: absolute; top: 0; bottom: 0; width: 100%;,并确保其父级具有 position: relative;。见codepen

【讨论】:

这是一个很好的解决方案,但在我的情况下,我需要让内部元素的宽度定义宽度(在这种情况下,它是一些导航链接中的文本。我最终设置了高度容器并取得了成功。看到这个答案:***.com/questions/33636796/… 好像是WebKit的bug:bugs.webkit.org/show_bug.cgi?id=137730 我试图在另一个页面上提到“一直坚持使用 flexbox”,但它不适用于我的情况。这个解决方案对我有用。 (注意:需要添加“left:0”的属性来覆盖父级的左填充) 请关注此处的讨论,了解解决问题的各种方法。 position absolute pinning 是一种选择,也是我自己提出的一种选择,但它不如在 flex-growth 容器上设置 height:0 那样干净。

以上是关于嵌套的 Flexbox 100% 高度在 Safari 中不起作用 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

Flexbox 100% 高度问题

Chrome 中的 Flexbox 容器没有达到 100% 的高度 [重复]

flexbox 列子级的高度 100% [重复]

在 flexbox 中使用“高度:100%”和“对齐项目:拉伸”[重复]

flexbox 容器不会拉伸 100% 高度

Internet Explorer 不尊重我的最小高度:100% 使用 flexbox