-1

I have a vertical nav-bar that takes that is a set 250px. I made the nav-bar a template on django and now I am looking to create a container div that fills the rest of the page. My question is how do I get this div to be the width of the entire page minus this nav-bar.

WilliamSeeley 31415
  • 3
  • 1

1 Answers1

1

I would do it with grid. Set two columns, one 250px and give the second rest of space.

body{
  margin:0;
}

.grid{
display: grid;
grid-template-columns: 250px 1fr;
height: 100vh;
width: 100vw;
}

.nav {
 width:250px;
 background-color: green;
}

.content {
  width: 100%;
 background-color: blue;
}
<div class="grid">
  <div class="nav"></div>
  <div class="content"></div>
</div>
Max Tuzenko
  • 1,051
  • 6
  • 18
  • Thank you very much that is a very helpful solution it also works with my media query that makes the nav-bar horizontal at the top. I suppose i can use grid-template-rows! Thanks – WilliamSeeley 31415 Jun 17 '22 at 18:48