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

Question

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

Answer 1

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)