Make sidebar full page height

Question

I have a CSS sidebar that will display links on my website. However, it does not fill the full page height as I want. How can I make this work?

JSFiddle: http://jsfiddle.net/Pw4FN/

body {
  font: 13px sans-serif;
  margin: 0
}

#sidebar {
  float: left;
  height: 100%;
  width: 100px;
  font-size: 14px;
  position: absolute;
  background: #E0E0E0;
  padding: 15px 30px;
}

#sidebar a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

#sidebar li {
  list-style: none;
  padding: 5px 0;
}

.s {
  font-weight: 700;
  color: #36c
}

#content {
  width: 80%;
  padding: 20px 0 0 180px;
}

<div id="sidebar">
  <li class="s">Current</li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
</div>

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

Answer 1

The easiest way is simply to do:

height: 100vh;

Where `vh` stands as vertical height of the browser window. Responsive to resizing of brower and mobile devices.

body {
  font: 13px sans-serif;
  margin: 0
  overflow-y: hidden;
}

#sidebar {
  float: left;
  height: 100vh;
  width: 100px;
  font-size: 14px;
  position: absolute;
  background: #E0E0E0;
  padding: 15px 30px;
}

#sidebar a:link,
a:visited {
  color: #000;
  text-decoration: none;
}

#sidebar li {
  list-style: none;
  padding: 5px 0;
}

.s {
  font-weight: 700;
  color: #36c
}

#content {
  width: 80%;
  padding: 20px 0 0 180px;
}

<div id="sidebar">
  <li class="s">Current</li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
  <li><a href="/">Page</a></li>
</div>

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.</p>
</div>

Answer 2

there is a much easier way that I thought of yesterday.

Go have a look at the website I'm busy with: http://www.atlm.co.za/aboutconcepts.html and look at the sidebar to the right in blue.

This is easily accomplished by having that sidebar as the main container and the larger white content area to the left as a floating object...

Quite simple, just remember to clear the float to have the blue main container extend down to the bottom.

This was quite simple to do and I suppose anyone will be able to follow my code.

That is the html I used and the css is as follows:

 .maincontent_blue {
  margin-top: 0;
  padding-bottom: 0;
  width: 100%;
  background: #00D7E8;
  color: #fff;
}


.mainleft {
  height: 100%;
  float: left;
  background: #fff;
  padding-top: 5px;
  padding-bottom: 10px;
  width: 600px;
  margin-right: 15px;
  margin-bottom: 0;
}

<div class="maincontainer">
  <div class="maincontent_blue">

    <!-- Title -->



    <!-- Title__end -->




    <div class="mainleft">

      <h1 style="text-align:center">About Concepts</h1>

      <p><img src="images/aboutlogo1.png" width="500" height="284" /></p>
      <p><a href="pdf/Media Pack About Concepts 201102_1.pdf" title="About Concepts Media Pack" target="_blank"><img src="images/aboutmp.png" width="500" height="284" /></a></p>
      <p><img src="images/aboutp1.png" width="500" height="284" /></p>
      <p><img src="images/aboutp2.png" width="500" height="284" /></p>
      <p><img src="images/aboutlogo2.png" width="500" height="284" /></p>
      <p><img src="images/aboutlogo3.png" width="500" height="284" /></p>


      <p>&nbsp;</p>

    </div>

    <p>&nbsp;</p>

    <p style="padding-top:40px">We designed a About Concepts' new logo for them in a record time and they were greatly impressed with our service.</p>

    <p style="padding-top:185px">After the logo design, they needed us to design presentational tools for their sales people. We then sat down with the Marketing Manager, Sales Manager and a few of the sales people to really understand what the company was all about and how we were to approach the project and also how we could compliment their excellent sales team with tools that would almost do their jobs for them.</p>
    <p style="padding-top:600px">After satisfying their needs and after some time they >came back to us and asked us to design a new logo that would shift trends as they were >moving into new offices with a modern design. We jumped to the opportunity to greatly >improve their already fantastic logo. This is what we came up with. We later heard back >from them and all the compliments they were getting on the great new logo. They >&quot;stood from the crowd&quot; as the owner stated.</p>
    <div class="clearfloat"></div>

  </div>
  <!-- end .maincontent_blue -->
</div><!-- end .maincontainer -->