Making a sidebar always 100% height

Question

I've designed a website as you can see below, which has a FIXED header (white), then a sub-header, main content, sidebar (red) and a footer (grey).

I have created the wireframe for the website in HTML/CSS, but can't get the sidebar to work properly.

I would like the sidebar to start on the sub-header and go all the way to the bottom of the page to end after the footer (see the image below) no matter how much content there is in the main section, but I can't get it to work.

Please help! Here is my current efforts on JSFIDDLE, as you can see the sidebar doesn't go to the bottom of the page: http://goo.gl/EQ7CJh

possible duplicate of [CSS Sidebar Height 100%](http://stackoverflow.com/questions/791231/css-sidebar-height-100) — jcaron, Jun 27 '14 at 10:55
When the main content is larger than a page, where do you expect the vertical scroll-bar to appear? Between main content and side bar or to the right from side bar, simply speaking you want sort of "sticky" side bar which is always visible no matter where the vertical scroll-bar is? — Borys Generalov, Jun 27 '14 at 11:29

score 1 · Answer 1 · answered Jun 27 '14 at 10:56

1

Remove the position: relative from content div and use margin-top to position the panel, as shown:

#content {
    height: 100%;
}
#sidebar {
    border: 1px solid skyblue;
    width: 100px;
    position: absolute;
    margin-top:7em;
    top: 0px;
    right:0px;
    bottom: 0px;
}

Updated jsfddle

answered Jun 27 '14 at 10:56

Borys Generalov

2,255
17
19

Hi, thanks but this doesn't do what I'm trying to achieve. I need it to stay within the "maxwidth" class and also for it to go over the sub-header in addition to the footer. – user3782712 Jun 27 '14 at 11:00
I am not sure why you need this limitation: to stay within the "maxwidth" class, i.e. what exactly do you mean by this? Without that the desired effect can be achieved with example above. Here http://jsfiddle.net/ZrnAg/3/ I made the main content large enough and the side bar still occupies the area from sub-header to the footer. – Borys Generalov Jun 27 '14 at 11:23

score 0 · Answer 2 · answered Jun 27 '14 at 11:06

0

Can you try this jsFiddle http://jsfiddle.net/2ZhpH/1093/

I have changed the HTML structure and added the #sidebar css to this

#sidebar {
 position:absolute;
 top:48px;
 border: 1px solid skyblue;
 width: 100px;
 position: absolute;
 right: 0;
 bottom: 0px;
}

answered Jun 27 '14 at 11:06

SSS

1,025
7
17

Thanks but again this also doesn't quite work. It goes over the sub-header which is good but if theres lots of content in main bit the sidebar doesnt go full height. Also it isn't within the "maxwidth" which is essential – user3782712 Jun 27 '14 at 11:12
http://jsfiddle.net/2ZhpH/1094/ Check this. Just added the sidebar div to top and then some lorem text – SSS Jun 27 '14 at 11:15
Also try adding position:fixed for sidebar if you want to make it static – SSS Jun 27 '14 at 11:22

Sudheer · Answer 3 · 2014-06-27T13:09:03.767

0

Demo

If you want to have side bar to the side of The div which contains sub-header main and footer the you should have a Grid structure like this

<div id="header" class="...">
</div>
<div class="divide"> <!-- divide class to have like 85% width leaving rest of it for side bar -->
   <div class="sub-header">
   </div>
   <div class="main">
   </div>
   <div id="footer">
   </div> 
</div>
  <div class="sidebar">
  </div>

edited Jun 27 '14 at 13:09

answered Jun 27 '14 at 11:12

Sudheer

2,955
2
21
35

Hi I'm afraid this also doesn't work, it needs sit going through the sub right to the footer just like the picture. Also the footer isnt at the bottom now. Thanks though – user3782712 Jun 27 '14 at 12:58
@user3782712 i updated the fiddle adjust the height of side-bar accordingly – Sudheer Jun 27 '14 at 13:09

Making a sidebar always 100% height

3 Answers3

Demo