Two divs stretched to the end of the page - web

Question

I have an OUTER div with two inner divs:
one of them is VERTICAL SIDEBAR whose content is fairly short
second one is div with MAIN PAGE whose content varies
They are both set to float: left, so they are next to each other.
I already learned that when setting height or min-height in percentage, all the parents need to have their height specified also.
I would like them both to be stretched to the end of the page. Havent managed to do that, problems begin when MAIN PAGE div is longer than monitor height( so there needs to be scrollbar), then I usually end with that nasty scrollbar inside MAIN PAGE div or I end with the SIDEBAR div being too short.

Answer 1

ok you should set the Outer divs css like so
.outer{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow:auto;
}
This will set the outer div to completely fill the window, with a side bar to scroll the length of the rest of the page. You would only have one main side scrollbar.
Now if you want the sidebar to just fill the page. set its css like so:
.sideBar{
position:absolute //can be relative if necesary.
top:0;
bottom:0;
overflow:none;
}
Now this sets the sidebar to the exact height of the outer div. so it will span the entire page and the overflow is set to none to ensure no scrollbar.
Now the outer div's and sidebar div's height should be dictated by the main div, and you should only have one clean scroll bar.

Answer 2

You could do something like this:
jsFiddle
Setting display: table-cell on both div's inside the outer div with display: table-row will ensure they are always the same height, you'll have to set display: table on body for this to work, or you could just set it directly on the outer div instead of table-row. That will work just fine. This approach should work on anything better than IE7.
CSS:
html {
position: absolute;
bottom: 0px;
top:0px;
left: 0px;
right: 0px;
overflow: scroll-x;
}
body {
height: 100%;
padding: 0px;
margin: 0px;
display: table;
}
.outer {
display: table-row;
height: 100%;
width: 100%;
}
.sidebar, .mainpage {
display: table-cell;
height: 100%;
}
.sidebar {
width: 200px;
background-color: #EFEFEF;
}
HTML
<div class="outer">
<div class="sidebar">sidebar</div>
<div class="mainpage">mainpage</div>
</div>

Answer 3

After seeing your site, this is the fix:
.Page {
width: 970px;
min-height: 100%;
width: 100%;
display: table;
}
.Sidebar {
width: 257px;
background: url(img/sidebar-bg.png) repeat-y;
margin-left: 23px;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}
EDIT: I forgot the .Page styles, I added it.
EDIT: Also, if you want to center it, then use this:
html, body {
height: 100%;
min-height: 100%;
padding: 0px;
margin: 0px;
}
body {
padding: 0px;
margin: 0px;
line-height: 21px;
background: url(img/bg-page-01.jpg) no-repeat;
background-position: 50% 0%;
}
.Page {
height: 100%;
display: table;
margin: 0 auto;
}
.Sidebar {
width: 257px;
height: 100%;
background: url(img/sidebar-bg.png) repeat-y;
background: white;
display: table-cell;
vertical-align: top;
}
.Sidebar-Nav {
padding-left: 15px;
}
.Content {
height: 100%;
background: url(img/content-bg.png) repeat;
margin-left: 10px;
width: 680px;
float: left;
background: white;
display: table-cell;
padding: 10px;
}

Answer 4

If your talking about height issues here, then use this:
html, body {
height: 100%;
min-height: 100% /* for firefox */
}
#main, #sidebar {
height: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
-khtml-box-sizing: border-box;
box-sizing: border-box; /* eliminates increased height due to padding & child margins */
}
#sidebar { background: blue; width: 200px; float:left; margin: 0; }
#main { background: green; width: 960px; margin: 0 0 0 200px; }
edit: fiddle: http://jsfiddle.net/jTwqe/

Answer 5

I'm not really sure what your issue is, but is an alternate solution.
.outer { display: table; }
.sidebar, .main { display: table-cell; padding: 10px; }
.sidebar { background: green; }
.main { background: blue; }
Fiddle: http://jsfiddle.net/Q5CmR/