【发布时间】：2016-01-24 09:06:41
【问题描述】：
我想要实现的布局是这样的，正好填满了浏览器的整个视口：
[----fixed height top "menu bar"----]
/-----\/----------------------------\
|fixed|| |
|width|| both ways stretchy content |
|side || |
|bar || |
\-----/\----------------------------/
我几乎可以使用它，但我还没有弄清楚如何指定水平排列的框垂直填充它们可用的空间而不是页面的高度。就目前而言，只要侧边栏中的内容足够长以使其获得滚动条，我最终会在整个页面上添加一个额外的垂直滚动条，该滚动条正好滚动到顶部栏的高度，这不是什么我要。
以下 1998 年风格的演示页面说明了这个问题。它实际上在 Safari 9 中生成了我想要的布局，但不是 Chrome 或 Firefox。
注意这些附加约束，这些约束已经被演示满足并且必须保留：
在水平方向上可能有任意数量的固定宽度或可拉伸的盒子。
每个侧边栏或主要内容都有一个
overflow-y: auto垂直滚动条。这也必须有效（也就是说，长内容不能使整个 flexbox 布局超过视口大小）。一些侧边栏本身在垂直方向使用 flexbox 布局。-
90%-10% 的布局不适合此目的。也不允许剪辑某些内容。我有这个布局问题的全部原因是应用程序应该使用屏幕的每个像素来显示有用的信息或控件，所以任何额外的空白或剪辑的内容都是不可取的。
李>
<!doctype html>
<html style="height: 100%;">
<title>Flexbox test</title>
<style type="text/css">
#parent-of-topbar {
height: 100%; box-sizing: border-box; margin: 0;
background: #FCC;
display: flex; flex-direction: column;
}
#topbar {
padding: .2em;
background: white;
border: solid black;
border-width: 0 0 .3em 0;
color: black;
flex: 0 0 auto;
}
#main {
display: flex; flex-direction: row;
flex: 1 1 auto;
max-height: 100%;
}
.subwindow {
overflow-x: clip;
overflow-y: auto;
max-height: 100%;
border: 3px outset #CCC;
background: linear-gradient(to right, #CCC 0%,#AAA 100%);
}
.fixed {
flex: 0 0 auto;
width: 10em;
}
.stretchy {
flex: 1 1 auto;
width: 100%;
}
</style>
<body id="parent-of-topbar">
<div id="topbar">top bar content</div>
<div id="main">
<div class="subwindow stretchy">stretchy part</div>
<div class="subwindow fixed">
fixed sidebar 1; this should be scrollable, not stretch the content
<details open><div style="font-size: 3em;">spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam spam</div></details>
</div>
<div class="subwindow fixed">
2nd fixed sidebar
</div>
</div>
</body>这是我想要实现的布局的屏幕截图，通过硬编码维度伪造：
这是当前演示在 Chrome 上的布局截图：
【问题讨论】：
-
你的问题有点不清楚。第一段似乎提出了三个不同的问题。
-
@Michael_B 已编辑 — 我已经分离出“这是我已经拥有的，不能被提议的解决方案破坏”部分。怎么样？
-
好的，谢谢。但是只有 Safari 9 可以正确呈现上面的代码，对吗？在我的 PC 上使用 Chrome 或 FF 不起作用？
-
嗯，“正确”的意思是它得到了我想要的结果。我不知道哪个在正确实施规范。
-
您可以选择将
#main和.subwindow上的max-height: 100%更改为height: calc(100% - 18px)。 18px 是固定顶栏的计算高度。