CSS Positioning/Height Extending Full Page

Question

Hey guys, I'm having some trouble with my css position. Basically I have a sidebar that is set to the left of the screen, which basically includes all my links for navigation. I want the sidebar to extend all the way to the bottom of the screen, no matter if the user minimizes or maximizes the browser, or their resolution. Even if the page happens to scroll I want the div to go all the way to the bottom. I'm having a lot of trouble with this and cannot get it to work correctly. Here is my code, if anyone spots the reason it is not working, any help is greatly appreciated.

HTML:

    <div id="welcome">

                Welcome <br> to My Site!<br>

                    <span style="color: red; ">(Beta)</span>

            <div id="sidebar"><a href="index.php">Home</a></div>

            <div id="sidebar"><a href="link">link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="forumPage.php">Forum</a></div>

            <div id="sidebar"><a href="link">About</a></div>

            <div id ="sidebar"><a href="link">Requests</a></div>

            <div id="sidebar" ><a href="unity.php">"Pr0j3ct Un1ty"</a></div>

            <div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>

            <div id = "sidebar" >

                <a href = "logoff.php">Logout</a>   </div>

            <div style=" font-size: 16px;"><a href="accountSettings.php">Account Settings</a></div>


            <div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>


</div>

CSS Page:

#welcome

{

width: 15%;

float: left;

background-color: darkgrey;

height: 100%;

text-align: center;

font-size: 24px;

font-family: Comic Sans MS;

font-weight: bold;
}

Answer 1

easiest practical way is to throw a bg image on your element that contains your floating sidebar with the bg color/graphic that repeats vertically. make sure the container has overflow/clearfix.

Answer 2

I think you are asking "how do I make two columns the same height?"

If that is the question, there are various 'tricks' to do it via CSS (such as meder's recommendation) but these days I'd strongly suggest just using javaScript. It's fairly trivial especially if you are using something like jQuery.

ON document ready, grab the height of each div and then force the shorter one to a height equal to the taller one.

Answer 3

The best way is to use a background image. If you are not using a body background image now then the easiest is to create and image with the width of the sidebar.

body {
    background-image: url(/images/bg.jpg); /* Wherever your image is located */
    background-repeat: repeat-y;
}

That will make the image go all the way to the bottom regardless of how tall your sidebar actually is.

Then on your sidebar, just style the div to fit within the image you created. If it's all the way to the left like you say then all you should need to add to your style is the correct width and maybe some padding.

If you are using a body background image than create another div with...

div { width: 100%; height: 100%; } /* You may need a float: left; as well */

...and place the above background CSS inside the new div. You will then have to add that new div just inside the tag in your HTML.