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 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:

    

        This is your header!
    
    

        

            

                This is your sidebar!                   
            
            
                  
            This is your content!

            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.
            
            

                This is the div that will stay at the bottom of your footer!
            
            

        
    


    This is your footer!