How to make sticked navbar full width i.e. without scrollbar

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>

So navbar is not scrollable and I don't need the scrollbar on its right side.

How to push the scrollbar 25px down and make navbar full width?

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

If i am not wrong you want this

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