HTML/CSS full height sidebar

Admin 1
Viewed 84462

I've found a lot of discussions and questions littered around the internet pertaining to this question, however, none of them seem to match my case and solutions are highly specific to a certain situation.

I have a header element with a height of 100px at the top of the page. I have a div#sidebar element floated left with a width of 250px, and finally a div#main element also floated left.

The height of html, body, and div#sidebar is 100%.

My goal is to get div#sidebar to extend all the way down to the bottom of the page regardless of browser size or content size. Obviously, if the content is longer than the viewable page height it should act normally and push past the end of the page, introducing scroll bars.

However, as it stands now, it seems the page height has been calculated as 100% + 100px, introducing scrollbars even though there is no content that would push div#sidebar down. So far I have found no solutions that work, or perhaps I have missed it or messed a solution up; regardless, I've been at this for well over an hour and I'm about to rip my hair out.

Is there a non-JavaScript method of getting this to work properly to stop the header's height being added to 100%?

Here is my HTML/CSS - although I included all relevant details above, this should help.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Awesome Template!</title>
        <link href="./stylesheet.css" rel="stylesheet" />
    </head>
    <body>
        <header id="primary">
            <h1>My Awesome Template!</h1>
        </header>
        <div id="sidebar">
            <h1>Sidebar</h1>
        </div>
        <div id="main">
            <h1>Main</h1>
        </div>
    </body>
</html>

CSS:

html, body
{
    margin: 0;
    padding: 0;
    height: 100%;
}

body
{
    background: #fff;
    font: 14px/1.333 sans-serif;
    color: #080000;
}

header#primary
{
    width: 100%;
    height: 100px;
    background: #313131;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#4d4d4d), to(#313131));
    background-image: -moz-linear-gradient(#4d4d4d, #313131);
    background-image: -o-linear-gradient(#4d4d4d, #313131);
    background-image: linear-gradient(#4d4d4d, #313131);
}
header#primary h1
{
    margin: 0px 0px 0px 20px;
    padding: 0px;
    line-height: 100px;
    color: #ffffff;
}

#sidebar
{
    float: left;
    width: 250px;
    background: #ccc;
    min-height: 100%;
}

#main
{
    float: left;
}
height css html
6 Answers

I found that the method outlined in this article was a very simple method for solving the problem.

You need to surround your #sidebar and #main divs with another div, so your html code becomes:

...
<div id="content">
    <div id="sidebar">
        <h1>Sidebar</h1>
    </div>
    <div id="main">
        <h1>Main</h1>
    </div>
</div>
...

and then the following css will do something close to what you want:

#content {
    position: relative;
    width: 100%;
}
#sidebar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 240px;
}
#main {
    position: relative;
    margin-left: 250px;
}

(with a bit of tweaking e.g. I found that the margin of the h1 in #main seemed to be ignored ... but the margin of the h1 on #sidebar was not!).

user_21307890
Related