[我正在尝试使布局在没有任何JS（只有HTML和CSS）的情况下可以正常工作。
top-div
left-div center-div right-div
想法是在中心div上具有垂直滚动条，但在页面上其他位置（包括正文）都没有。
似乎最好的想法是使用垂直的flexbox制作顶部和底部的行，然后使用水平的flexbox制作左，中和右。
这有多难？
好吧，如果您看这个小提琴，对我来说显然很难理解：
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>