我正在尝试让布局在没有任何 JS 的情况下工作，只需要 HTML 和 CSS。
top-div
left-div center-div right-div
这个想法是在中心 div 上有垂直滚动条，但在页面上没有其他地方，包括正文。
似乎最好的想法是使用垂直弹性盒，制作顶行和底行，然后使用水平弹性盒制作左、中和右。
这有多难？
好吧，如果你看看这个小提琴，我显然很难理解：
https://jsfiddle.net/gL4pwkxu/1/
文档总是希望超出窗口的高度。为什么？
【问题讨论】：
我认为问题在于您忽略了
<header>top</header>元素
我还将高度单位更改为视口高度而不是 %。看一看：https://jsfiddle.net/zL6y7x2j/
希望对你有帮助
【讨论】：
要隐藏窗口滚动添加：
body {
overflow: hidden;
}
然后，让 div 可滚动：
#main-column {
overflow-y: scroll;
position: static;
}
【讨论】：
很难开始工作。从这个 SO 帖子：Scrolling a flexbox with overflowing content，需要添加一个元素，从内容中创建自己的高度。但我必须将full-page 高度设置为100vh（查看高度单位）并将content 的高度设置为任何值，然后它就可以工作了。见下文...
CSS
html, body {
margin: 0px;
padding: 0px;
}
full-page {
display: flex;
flex-flow: column;
height: 100vh;
}
header {
background-color: green;
}
content {
flex: 1;
display: flex;
position: relative;
height: 1px; // hackery
}
nav {
background-color: red;
}
#right-column {
background-color: blue;
}
#main-column {
flex: 1;
overflow-y: auto; // used 'auto' so it only appears if you need it
}
#main-column > div {
min-height: min-content; // magic
}
HTML
<html>
<body>
<full-page>
<header>top</header>
<content>
<nav>left</nav>
<div id="main-column">
<div>
center<br>
b<br>
v<br>
d<br>
e<br>
e<br>
f<br>
f<br>
d<br>
e<br>
e<br>
f<br>
d<br>
e<br>
e<br>
f<br>
f<br>
f<br>
</div>
</div>
<div id="right-column">right</div>
</content>
</full-page>
</body>
</html>
【讨论】：