我想要做一个设计，使 nav 保持固定在顶部并 main 滚动。因此，当我将位置固定给 nav 时，它固定了它的位置，而 main 移动到了 nav 的底部。所以为了让 main 可见，我给了margin-top 60px。但它移动了完整的 div 而不是 main。我想知道是什么破坏了我的设计以及如何修复它。
https://codepen.io/kumarmasterpraveen/pen/qBaoZYx?editors=1100
html
<div>
<nav> navigation </nav>
<main> main content </main>
</div>
css
nav {
position: fixed;
background-color: seagreen;
height: 60px;
width: 100%;
}
main {
margin-top: 60px;
}
【问题讨论】：
只需放入导航元素，顶部：0；并且会工作
html {
}
body {
overflow:hidden;
}
nav{
position: fixed;
background-color: seagreen;
height: 60px;
width: 100%;
top:0;
}
main{
overflow-y:scroll!important;
width:auto;
height:700px;
min-height:100%;
}<div>
<nav> navigation </nav>
<main> main content </main>
</div>【讨论】：
要根据 cmets 执行您尝试执行的操作（只有主内容的滚动条，您可以使用 flexbox 和 CSS-Grid。我有一个使用 CSS-Grid 的解决方案。您将正文声明为 @987654321 @ 并设置一个确定的高度height: 100vh; 以跨越整个浏览器高度。宽度与width: 100vw; 相同。然后使用grid-template-rows: 60px auto; 使用2 行。这样，第一个元素（导航栏）将是60px 高度并且main 内容是浏览器的整个剩余高度。最后但并非最不重要的一点是，您使用overflow-y: auto; 向main 内容添加溢出规则
body {
margin: 0;
box-sizing: border-box;
height: 100vh;
width: 100vw;
display: grid;
grid-template-rows: 60px auto;
}
nav {
padding: 10px;
}
main {
overflow-y: auto;
padding: 10px;
}<body>
<nav>Navigation</nav>
<main>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</main>
</body>因为你不能使用网格：你也可以不使用网格，但是它更棘手。您可以使用 calc 函数使内容的高度与剩余视口高度一样高 `height: calc(100vh - 60px);如下面的 sn-p 所示。
body {
margin: 0;
box-sizing: border-box;
height: 100vh;
width: 100vw;
}
nav {
box-sizing: border-box;
padding: 10px;
height: 60px;
}
main {
box-sizing: border-box;
overflow-y: auto;
padding: 10px;
height: calc(100vh - 60px);
}<body>
<nav>Navigation</nav>
<main>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</main>
</body>【讨论】：