如何使粘贴的导航栏全宽，即没有滚动条

Question

 html, body{ margin:0; padding:0; }.navbar{ background:lightseagreen; height:25px; position:sticky; top:0; }.grida{ display:grid; grid-template-columns:70fr 30fr; grid-column-gap:3%; min-height:100vh; }.gridaa{background:gold;}.gridab{background:silver;}.footer{ background:lightseagreen; min-height:50px; }

 <div class='navbar'></div> <div class='grida'> <div class='gridaa'></div> <div class='gridab'></div> </div> <div class='footer'></div>

所以navbar不可滚动，我不需要它右侧的滚动条。

如何将滚动条向下推 25px 并使navbar全宽？

Answer 1

 html, body{ margin:0; padding:0; overflow: hidden; /* disable body overflow this will enable */ } /* navbar to have full width without */ /* scrollbar */.navbar{ background:lightseagreen; height:25px; position:sticky; top:0; }.grida{ display:grid; grid-template-columns:70fr 30fr; grid-column-gap:3%; height:100vh; overflow: auto; /* here you can set overflow of your content */ } /*container */.gridaa{background:gold;height:500px;}.gridab{background:silver;height:500px;}.footer{ background:lightseagreen; height:150px; grid-column: 1/3; grid-row: 2/3; }

 <div class='navbar'></div> <div class='grida'> <div class='gridaa'></div> <!-- move content into block --> <div class='gridab'></div> <!-- which will have overflow --> <div class='footer'></div> </div>

Answer 2

如果我没有错，你想要这个

.grida {
 display: grid;
 grid-template-columns: 70fr 30fr;
 grid-column-gap: 3%
 height: calc(100vh - 75px);
}