Question

I’ve run into a perplexing problem that I’m not quite sure how to solve. I have a sidebar and a main area. The sidebar has a width of 25%, and a max-width of 350px. The rest is taken up by the main area (which has width: auto). The sidebar needs to have a 100% height, and always remain where it is, regardless of how much the user scrolls.

If I had a fixed width sidebar, I could do something like this (demo here):

div#sidebar {
    width: 350px;
    position: fixed;
    top: 0px;
    left: 0px;
    height: 100%
}

div#main {
    width: auto;
    margin-left: 350px;
}

However, since I don’t know how wide my sidebar is going to be, I won’t know how much margin to add to my main content area.

Any ideas?

Answer 1

I think this is what you are looking for, see demo fiddle.

CSS:

html,
body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
}
#sidebar {
    float: left;
    width: 25%;
    max-width: 350px;
    height: 100%;
    overflow: hidden;
}
#main {
    overflow-x: hidden;
    overflow-y: auto; 
    height: 100%;  
}

HTML:

<div id="sidebar">

</div>
<div id="main">

</div>