我是 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 http://codepen.io/anon/pen/doKeQy?editors=101.
<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>
Thanks.
这里对CSS盒模型的解释有点奇怪。我不愿意说谁对谁错。但无论如何，诀窍是创建一个包含 a、b 和 c 的包装器，其中包含position: absolute; top: 0; bottom: 0; width: 100%;并确保其父级有position: relative;. See codepen http://codepen.io/anon/pen/mJKKeR
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
