htmlcssnavstretchsidenav

Adaptable full height of page sidenav

I have a simple issue, I've looked through many threads but found no appropriate solution. I just want to make the background (black) of my sidenav to extend all the way down to the bottom regardless of how much content the page has, a stretchable full page height sidenav (not a fixed one). It only seems to stretch when zooming out but not at 100%, I don't know why is that.

nav {
  font-family: 'Trebuchet MS';
  height: 70px;
  color: #FFFFFF;
  background-color: purple;
  position: relative;
}

.sidenav {
  height: 100vh;
  width: 175px;
  float: left;
  color: black;
  margin: 0;
  background-color: black;
  position: relative;
}

.sidenav a {
  padding: 10px 0px 8px 20px;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}
<link rel="stylesheet" href="test.css">
<nav>
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <input id="search-btn" type="checkbox" />
        <label for="search-btn"> </label>
        <input id="search-bar" type="text" placeholder="Search..." />
      </td>
    </tr>
  </table>
</nav>
<nav class="sidenav">
  <a href="#">Index</a>
  <a href="#">FAQ</a>
  <a href="#">Latest Entries</a>
  <a href="#">Other Sites</a>
</nav>
<div>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
  <br/><br/><br/><br/><br/><br/><br/><br/>
</div>

Solution

  • Use the body as grid by adding body { display: grid; }. Next add a 2 column layout by using grid-template-columns: sidebar-width auto;. To have at least the entire viewport filled add: grid-template-rows: navbar-height auto; min-height: 100vh;.

    To have the navbar span both columns you can simply add grid-column: span 2;. For better accuracy and not needing to use nth-child selector I added classes to the top navbar aswell as the content div box.

    body {
  margin: 0;
  display: grid;
  grid-template-columns: 200px auto;
  grid-template-rows: 70px auto;
  min-height: 100vh;
}

.nav {
  font-family: 'Trebuchet MS';
  color: #FFFFFF;
  background-color: purple;
  grid-column: span 2;
}

.sidenav {
  color: black;
  margin: 0;
  background-color: black;
}

.sidenav a {
  padding: 10px 0px 8px 20px;
  font-size: 25px;
  color: #818181;
  display: block;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.content {
  padding: 10px;
}
    <link rel="stylesheet" href="test.css">
<nav class="nav">
  <table>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>
        <input id="search-btn" type="checkbox">
        <label for="search-btn"> </label>
        <input id="search-bar" type="text" placeholder="Search...">
      </td>
    </tr>
  </table>
</nav>
<nav class="sidenav">
  <a href="#">Index</a>
  <a href="#">FAQ</a>
  <a href="#">Latest Entries</a>
  <a href="#">Other Sites</a>
</nav>
<div class="content">
  <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>
</div>