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)

Answer 2

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

Answer 3

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>