我想要的是做一个设计，使导航保持固定在顶部和主卷轴。所以当我给nav定位时，它就固定了它的位置，主移动在nav的底部。因此，为了使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;
}
只需放入nav元素，top:0；will起作用了
null
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>
要根据注释做你想做的事情（只有主内容的滚动条，你可以使用flexbox和CSS-Grid。我有一个使用CSS-Grid的解决方案。您将主体声明为
null
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>