Make navigation bar take up entire page height in css

Question

I am designing a website using css and html. I have managed to get a navigation bar on the left side of my page using this css, however when the screen is scrolled down the

Answer 1

You could just modify your #navbar css and set position to fixed

#navbar {
  background: #a8a599;

  /* removed css */
  /* float: left; */

  /* new css */
  position:fixed;
  top:0;
  left:0;
  /***********/

  width: 20%;
  height: 100%;
}

float: left; is positioned in relation to the document.

Removing float and adding position: fixed; will position the element in relation to the window.

Then you can add top, bottom, left or right to suit your needs

I forked your fiddle for an example Here

Some more information on float W3 CSS Float

Some more information on position W3 CSS Position