Force sidebar height 100% using CSS (with a sticky bottom image)?

Css Problem Overview

I've been banging my head against the wall for hours trying to figure out this issue and think it must be something small I'm missing. I've searched online, but nothing I have found seems to work. The HTML is:

<body>
  <div id="header">
    <div id="bannerleft">
    </div>

    <div id="bannerright">
      <div id="WebLinks">
        <span>Web Links:</span>
        <ul>
          <li><a href="#"><img src="../../Content/images/MySpace_32x32.png" alt="MySpace"/></a></li>
          <li><a href="#"><img src="../../Content/images/FaceBook_32x32.png" alt="Facebook"/></a></li>
          <li><a href="#"><img src="../../Content/images/Youtube_32x32.png" alt="YouTube"/></a></li>
        </ul>
      </div>
    </div>
  </div>
  <div id="Sidebar">
    <div id="SidebarBottom">
    </div>
  </div>
  <div id="NavigationContainer">
    <ul id="Navigation">
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
      <li><a href="#">Nav</a></li>
    </ul>
  </div>
  <div id="Main">
    <!-- content -->
  </div>
</body>

My full CSS is:

* {
  margin: 0px;
  padding: 0px;
}

body {
  font-family: Calibri, Sans-Serif;
  height: 100%;
}

#header {
  width: 100%;
  z-index: 1;
  height: 340px;
  background-image: url("../../Content/images/bannercenter.gif");
  background-repeat: repeat-x;
}

#header #bannerleft {
  float: left;
  background-image: url("../../Content/images/bannerleft.gif");
  background-repeat: no-repeat;
  height: 340px;
  width: 439px;
  z-index: 2;
}

#bannerright {
  float: right;
  background-image: url("../../Content/images/bannerright.gif");
  background-repeat: no-repeat;
  width: 382px;
  height: 340px;
  background-color: White;
  z-index: 2;
}

#Sidebar {
  width: 180px;
  background: url("../../Content/images/Sidebar.png") repeat-y;
  z-index: 2;
  height: 100%;
  position: absolute;
}

#SidebarBottom {
  margin-left: 33px;
  height: 100%;
  background: url("../../Content/images/SidebarImage.png") no-repeat bottom;
}

#NavigationContainer {
  position: absolute;
  top: 350px;
  width: 100%;
  background-color: #bbc4c3;
  height: 29px;
  z-index: 1;
  left: 0px;
}

#Navigation {
  margin-left: 190px;
  font-family: Calibri, Sans-Serif;
}

#Navigation li {
  float: left;
  list-style: none;
  padding-right: 3%;
  padding-top: 6px;
  font-size: 100%;
}

#Navigation a:link, a:active, a:visited {
  color: #012235;
  text-decoration: none;
  font-weight: 500;
}

#Navigation a:hover {
  color: White;
}

#WebLinks {
  float: right;
  color: #00324b;
  margin-top: 50px;
  width: 375px;
}

#WebLinks span {
  float: left;
  margin-right: 7px;
  margin-left: 21px;
  font-size: 10pt;
  margin-top: 8px;
  font-family: Helvetica;
}

#WebLinks ul li {
  float: left;
  padding-right: 7px;
  list-style: none;
}

#WebLinks ul li a {
  text-decoration: none;
  font-size: 8pt;
  color: #00324b;
  font-weight: normal;
}

#WebLinks ul li a img {
  border-style: none;
}

#WebLinks ul li a:hover {
  color: #bcc5c4;
}

I'd like the sidebar to stretch in height with the content of my page and leave the sidebar bottom image always at the bottom of the sidebar.

Css Solutions

Solution 1 - Css

This worked for me

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -5000px; /* any large number will do */
  padding-bottom: 5000px; 
  .... 
}

Solution 2 - Css

Until CSS's flexbox becomes more mainstream, you can always just absolutely position the sidebar, sticking it zero pixels away from the top and bottom, then set a margin on your main container to compensate.

JSFiddle

http://jsfiddle.net/QDCGv/

HTML

<section class="sidebar">I'm a sidebar.</section>

<section class="main">I'm the main section.</section>

CSS

section.sidebar {
  width: 250px;
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: green;
}

section.main { margin-left: 250px; }

Note: This is an über simple way to do this but you'll find bottom does not mean "bottom of page," but "bottom of window." The sidebar will probably abrubtly end if your main content scrolls down.

Solution 3 - Css

UPDATE: As this answer is still getting votes both up and down, and is at the time of writing eight years old: There are probably better techniques out there now. Original answer follows below.

Clearly you are looking for the http://www.alistapart.com/articles/fauxcolumns/">Faux columns technique :-)

By how the height-property is calculated, you can't set height: 100% inside something that has auto-height.

Solution 4 - Css

I would use css tables to achieve a 100% sidebar height.

The basic idea is to wrap the sidebar and main divs in a container.

Give the container a display:table

And give the 2 child divs (sidebar and main) a display: table-cell

Like so..

#container {
display: table;
}
#main {
display: table-cell;
vertical-align: top;
}
#sidebar {
display: table-cell;
vertical-align: top;
}

Take a look at this LIVE DEMO where I have modified your initial markup using the above technique (I have used background colors for the different divs so that you can see which ones are which)

Solution 5 - Css

Flexbox (http://caniuse.com/#feat=flexbox)

First wrap the columns you want in a div or section, ex:

<div class="content">
    <div class="main"></div>
    <div class="sidebar"></div>
</div>

Then add the following CSS:

.content {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

Solution 6 - Css

Further to @montrealmike 's answer, can I just add my adaptation?

I did this:

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

I did the "101%" thing to cater for the (ultra rare) possibility that somebody may be viewing the site on a huge screen with a height more than 5000px!

Great answer though, montrealmike. It worked perfectly for me.

Solution 7 - Css

I have run into this issue several times on different projects, but I have found a solution that works for me. You have to use four div tags - one that contains the sidebar, the main content, and a footer.

First, style the elements in your stylesheet:

#container {
width: 100%;
background: #FFFAF0;
}

.content {
width: 950px;
float: right;
padding: 10px;
height: 100%;
background: #FFFAF0;
}

.sidebar {
width: 220px;
float: left;
height: 100%;
padding: 5px;
background: #FFFAF0;
}

#footer {
clear:both;
background:#FFFAF0;
}

You can edit the different elements however you want to, just be sure you dont change the footer property "clear:both" - this is very important to leave in.

Then, simply set up your web page like this:

<div id=”container”>
<div class=”sidebar”></div>
<div class=”content”></div>
<div id=”footer”></div>
</div>

I wrote a more in-depth blog post about this at http://blog.thelibzter.com/how-to-make-a-sidebar-extend-the-entire-height-of-its-container. Please let me know if you have any questions. Hope this helps!

Solution 8 - Css

Perhaps Multi-Column Layouts Climb Out of the Box is what you're looking for?

Solution 9 - Css

i guess, today one would probably use flexbox for this. See the holy grail example.

Solution 10 - Css

I was facing the same problem as Jon. TheLibzter put me on the right track, but the image that has to stay at the bottom of the sidebar was not included. So I made some adjustments...

Important:

Positioning of the div which contains the sidebar and the content (#bodyLayout). This should be relative.
Positioning of the div that has to stay at the bottom of the sidbar (#sidebarBottomDiv). This should be absolute.
The width of the content + the width of the sidebar must be equal to the width of the page (#container)

Here's the css:

    #container
    {
        margin: auto;
        width: 940px;
    }
    #bodyLayout
    {
        position: relative;
        width: 100%;
        padding: 0;
    }
    #header
    {
        height: 95px;
        background-color: blue;
        color: white;
    }
    #sidebar
    {
        background-color: yellow;
    }
    #sidebarTopDiv
    {
        float: left;
        width: 245px;
        color: black;
    }
    #sidebarBottomDiv
    {
        position: absolute;
        float: left;
        bottom: 0;
        width: 245px;
        height: 100px;
        background-color: green;
        color: white;
    }
    #content
    {
        float: right;
        min-height: 250px;
        width: 695px;
        background-color: White;
    }
    #footer
    {
        width: 940px;
        height: 75px;
        background-color: red;
        color: white;
    }
    .clear
    {
        clear: both;
    }

And here's the html:

<div id="container">
    <div id="header">
        This is your header!
    </div>
    <div id="bodyLayout">
        <div id="sidebar">
            <div id="sidebarTopDiv">
				This is your sidebar!					
            </div>
            <div id="content">					
			This is your content!<br />
			The minimum height of the content is set to 250px so the div at the bottom of
			the sidebar will not overlap the top part of the sidebar.
            </div>
            <div id="sidebarBottomDiv">
				This is the div that will stay at the bottom of your footer!
            </div>
            <div class="clear" />
        </div>
    </div>
</div>
<div id="footer">
    This is your footer!
</div>

Solution 11 - Css

I realise this is an old post but I was trying to work something out for my site to have a sidebar. Would this work?

#sidebar-background
{
    position:fixed;
    width:250px;
    top:0;
    bottom:0;
    background-color:orange;
}

#content-background
{
    position:fixed;
    right:0;
    top:0;
    bottom:0;
    left:250px;
    background-color:pink;
}

#sidebar
{
    float:left;
    width:250px;
}

#content
{
    float:left;
    width:600px;
}

<div id="sidebar-background"></div>
<div id="content-background"></div>

<div id="sidebar">Sidebar stuff here</div>
<div id="content">Stuff in here</div>

Solution 12 - Css

I think your solution would be to wrap your content container and your sidebar in a parent containing div. Float your sidebar to the left and give it the background image. Create a wide margin at least the width of your sidebar for your content container. Add clearing a float hack to make it all work.

Solution 13 - Css

use body background if you are using fixed width sidebar give the same width image as your side bar. also put background-repeat:repeat-y in your css codes.

Solution 14 - Css

Position absolute, top:0 and bottom:0 for the sidebar and position relative for the wrapper (or container) witch content all the elements and it's done !

Solution 15 - Css

Try this. It forces navbar to grow as content added, and keeps main area centered.

   <html>
        <head>
            <style>
                    section.sidebar {
          width: 250px;
          min-height:100vh;
          position: sticky;
          top: 0;
          bottom: 0;
          background-color: green;
        }
    
        section.main { position:sticky; top:0;bottom:0;background-color: red; margin-left: 250px;min-height:100vh; }
            </style>
            <script lang="javascript">
            var i = 0;
            function AddOne()
            {
                for(i = 0;i<20;i++)
                {
                var node = document.createElement("LI");
                var textnode = document.createTextNode(' Water ' + i.toString());
                
                node.appendChild(textnode);
                document.getElementById("list").appendChild(node);
                }
            
    
            }
            </script>
        </head>
        <body>
                <section class="sidebar">
                    <button id="add" onclick="AddOne()">Add</button>
                    <ul id="list">
                        <li>bullshit 1</li>
                    </ul>
                </section>
                <section class="main">I'm the main section.</section>
        </body>    
    </html>

Solution 16 - Css

this is a simplified version of danield's answer

.container {
  display: table;
  height: 260px;
}
#sidebar {
  display: table-cell;
  vertical-align: top;
  background-color:red;
  position:relative;
} 

#sidebarbottom
{
  height:30px;
  position:absolute;
  bottom:0;
}

<div class="container">
  <div id="sidebar">
    SIDEBAR HERE
    <div id="sidebarbottom">
      Sidebar Bottom
    </div>
  </div>
</div>

Content Type	Original Author	Original Content on Stackoverflow
Question	Jon	View Question on Stackoverflow
Solution 1 - Css	montrealmike	View Answer on Stackoverflow
Solution 2 - Css	Adam Grant	View Answer on Stackoverflow
Solution 3 - Css	Arve Systad	View Answer on Stackoverflow
Solution 4 - Css	Danield	View Answer on Stackoverflow
Solution 5 - Css	9ete	View Answer on Stackoverflow
Solution 6 - Css	Lloyd Jones	View Answer on Stackoverflow
Solution 7 - Css	TheLibzter	View Answer on Stackoverflow
Solution 8 - Css	strager	View Answer on Stackoverflow
Solution 9 - Css	Frank Lämmer	View Answer on Stackoverflow
Solution 10 - Css	Krizzz	View Answer on Stackoverflow
Solution 11 - Css	ChrisHigs	View Answer on Stackoverflow
Solution 12 - Css	Bjorn	View Answer on Stackoverflow
Solution 13 - Css	Ajit Bhandari	View Answer on Stackoverflow
Solution 14 - Css	Vincent V.	View Answer on Stackoverflow
Solution 15 - Css	WebBoy	View Answer on Stackoverflow
Solution 16 - Css	suhailvs	View Answer on Stackoverflow