我是全新的，所以如果我偏离轨道请原谅。
我只是在玩一个以页面为中心的网站。我想要的是填补下面的空白，但我似乎无法弄清楚该怎么做，或者是否有可能。我可能没有很好地解释我想做什么，所以我会附上一张图片，说明它现在的样子以及我实际希望它看起来像什么，以便于理解。
我可以用我的代码做什么来做到这一点？有可能吗？
html {
background-color: lightgrey;
}
body {
display: flex;
flex-direction: row;
width: 960px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
}
nav {
background-color: black;
width: 200px;
height: 400px;
}
#box1 {
background-color: blue;
width: 200px;
height: 100px;
}
#box2 {
background-color: purple;
width: 200px;
height: 100px;
}
#box3 {
background-color: yellow;
width: 200px;
height: 100px;
}
#box4 {
background-color: red;
width: 200px;
height: 100px;
}
main {
background-color: green;
width: 100vw;
height: 100vh;
}<body>
<nav>
<div id="box1">
</div>
<div id="box2">
</div>
<div id="box3">
</div>
<div id="box4">
</div>
</nav>
<main>
</main>
</body>最佳答案
因为您正在构建 <main>在<nav>之外它位于右侧，您可以添加 position css 属性到 nav，它将位于 main 之上，如果这是您想要的，是否有特定的内容要放置在 nav 下方？
关于html - 有没有办法对齐 nav 和 main 以便 main 填充空白页面？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55563894/