嵌套Flexbox 100％高度在Safari中不工作 [英] Nested Flexbox 100% Height Not Working in Safari
问题描述
我刚刚接触Flexbox，我试图使用它创建一个具有固定标题，固定页脚和内容区域的布局，以填充页眉和页脚之间的可用空间。内容区域是具有3个面板（div）的可滚动区域，每个面板具有100％的高度。为了演示目的，我把每个面板顶部的 a，b，c （他们称为Panel a，Panel b和Panel c）文本。
I'm new to Flexbox and I'm trying to use it to create a layout with a fixed header, fixed footer and a content area that fills up the available space in between the header and footer. The content area is a scrollable area that has 3 panels (divs), each of which has 100% height. For demo purposes, i put the a, b, c (ill refer to them as Panel a, Panel b and Panel c) text on top of each panel.
在Firefox v39中，Panel a，b和c采用可滚动容器的完整高度。
In Firefox v39, Panel a, b and c are taking the full height of the scrollable container.
.3）），每个面板的高度比容器高一点。如果滚动到最后一个面板（面板c），当内容一直滚动到下面时，标题'c'不再显示。
In Safari (v 8.0.6 (10600.6.3)), each of the panel's height is a little bit taller than the container. If you scroll to the last Panel (Panel c), the title 'c' doesn't show up anymore when the content is scrolled all the way down. This is not the case with Firefox.
我想要的行为是Firefox中的行为。
My desired behaviour is the behaviour in Firefox.
代码。
<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>
谢谢。
推荐答案
这里的CSS框模型的解释有点奇怪。我不愿意说谁是对的，谁是错的。但无论如何，诀窍是创建一个包含a，b和c的包装，它具有 position：absolute; top：0; bottom：0; width：100％; 并确保其父级具有 position：relative; 。请参阅代码
Interpretation of CSS box model here is a bit strange. I'm reluctant to say who is right and who is wrong. But anyways, the trick is to create a wrapper containing a, b, and c, that has position: absolute; top: 0; bottom: 0; width: 100%; and make sure its parent has position: relative;. See codepen
这篇关于嵌套Flexbox 100％高度在Safari中不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
