我的页面有问题。我正在尝试创建一个 100vh 页面，它似乎工作正常。但后来我有一个页面太高而无法显示，并且出现了一个 scollbar 的现象。但是：我希望页面的主要部分是可滚动的(如果需要(，其余部分可以修复。我用我的代码准备了以下代码片段：
html {
font-family: sans-serif;
font-size: 0.5rem;
}
* {
box-sizing: border-box;
padding: 0;
border: 0;
margin: 0;
}
html * {
/* debugging */
border: 1px dotted hotpink;
}
header, footer {
text-align: center;
background-color: hotpink;
}
body {
display: flex;
flex-flow: column nowrap;
height: 100vh;
}
body>div {
flex: 1 1 auto;
display: flex;
flex-flow: row wrap;
}
nav {
background-color: lightblue;
width: 10%;
}
nav ul {
display: flex;
flex-flow: column nowrap;
list-style-type: none;
}
nav ul li:hover {
background-color: royalblue;
}
nav ul li a {
display: block;
text-decoration: none;
padding: 0.5em;
text-align: center;
}
main {
flex: 1 1 auto;
width: 75%;
}
aside {
width: 15%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0">
<title>title</title>
</head>
<body>
<header>
<h1>THIS IS A VERY LONG TITLE</h1>
</header>
<div>
<nav>
<ul>
<li><a href="/index.gohtml">index</a></li>
<li><a href="/post.gohtml">post</a></li>
</ul>
</nav>
<main>
<table>
<thead>
<th>ID</th>
<th>NAME</th>
<th>PRICES</th>
</thead>
<tbody>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
<tr><td>id</td><td>name</td><td>0</td><td>0</td></tr>
</tbody>
</table>
</main>
<aside>aside</aside>
</div>
<footer>(c) by me</footer>
</body>
</html>您能帮助我使整个页面不可滚动并且在必要时使主要元素可滚动吗？我已经尝试了几件事并使用谷歌一段时间了，但我发现的都是基于列的 flex-flow 的解决方案，而不是基于行的解决方案。有没有办法得到我想要的东西？
删除某些表格行时，可以看到预期的布局。
编辑：我忘了提到我想避免在主要组件上设置固定高度。我试过了，它奏效了，但我希望主要组件在调整窗口大小时是灵活的。
您可以将 flexbox 与overflow结合使用主布局来制作完整布局，而无需知道大小。您需要将flex-direction设置为column，然后将元素的顶部和底部间隔，而不是使用换行行。
body {
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content: space-between;
}
header, footer {
padding: 20px;
background: #dadada;
}
.main {
flex:8;
overflow-y: auto;
padding: 20px;
}
.spacer {
padding-top: 50px;
}<header>Some Header Stuff</header>
<div class="main">
<p>All the stuff in the middle. Using overflowY will make this scroll if the content is too big. Coloring of the header/footer/main is just to show the sections.</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
</div>
<footer>Some Footer Stuff</footer>如果您想在主内部进行 3 列布局，只需重复上述布局但带有一列。
body {
height: 100vh;
margin:0;
padding:0;
overflow:hidden;
display:flex;
flex-direction:column;
justify-content: space-between;
}
header, footer {
padding: 20px;
background: #dadada;
}
.main {
flex:8;
display:flex;
justify-content: space-between;
overflow:hidden;
}
aside {
padding: 20px;
background: #eee;
height: 100%;
}
section {
flex:8;
overflow-y: auto;
padding: 20px;
height: 100%;
}
.spacer {
padding-top: 50px;
}<header>Some Header Stuff</header>
<div class="main">
<aside>sidebar</aside>
<section>
<p>All the stuff in the middle. Using overflowY will make this scroll if the content is too big. Coloring of the header/footer/main is just to show the sections.</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
<p class="spacer">spacer</p>
</section>
<aside>sidebar</aside>
</div>
<footer>Some Footer Stuff</footer>