CSS: navigation bar to expand to the whole page height

Question

Im not too great at CSS but hopefully someone on here can help. I have the following mockup. (i have stripped out my content to make it easy to view)

<body>
   <div id="container">
     <div id="header"></div>
      <div id="body">
          <div id="navBar"></div>
          <div id="mainContent"></div>
      </div>
     <div id="footer"></div>
   </div>
</body>

my CSS is as follows:

html,
body {
   margin:0;
   padding:0;
   height:100%;
}
#container {
   min-height:100%;
   position:relative;
}
#header {
   background:#ff0;
   padding:10px;
}
#body {
   padding:10px;
   padding-bottom:60px;   /* Height of the footer */
}
#footer {
   position:absolute;
   bottom:0;
   width:100%;
   height:60px;   /* Height of the footer */
   background:#6cf;
}

now im unsure as to how to get the "navBar" to be the page height. I've tried adding height: 100% but that doesnt work.

Thanks, Matt

Gordon Gustafson · Answer 1 · 2013-10-15T16:55:12.060

2

Giving an element height: 100% will give it a height equal to that of its containing element, which in your case is #body. Since body in your example is only as big as it needs to be to hold its content, #navBar will be 100% of that height.

To fix this, you can make #container and #body height:100% to make them as tall as tho body tag, which takes up the whole page:

#container {
    height:100%
}
#body{
    height:100%;
}

In the interest of completeness, you could also set the top and bottom of #navBar:

position: absolute; 
top: 20px; 
bottom: 60px; /* height of footer */

To understand the difference, play around with This JS Fiddle. Mess around with the height and top, bottom, position properties to see how your changes affect the layout; just don't use both positioning methods at once!

edited Oct 15 '13 at 16:55

answered Oct 19 '09 at 22:14

Gordon Gustafson

40,133
25
115
157

I just wanna say to the noobs rejected my changes, that `top;` is an error and `0` is always `0`, doesn't matter the unit of measure you are using. The browser supports both 0 and 0px, because there are noobs like the moderators rejected my changes. So it is, this answer is still broken and I lost precious minutes of my time. – noun Oct 10 '13 at 23:27
@dedalo I have updated my answer; please continue to suggest improvements as it's still far from perfect. :) – Gordon Gustafson Oct 15 '13 at 16:57

score 1 · Answer 2 · answered Oct 19 '09 at 22:45

Your issue appears to be that each parent DIV all the way up to the BODY tag must explicitely have a height of 100% for #navBar to have 100% height. This means you would also have to set the height of #body to 100% as well, since it is the parent container of #navBar.

score 0 · Answer 3 · answered Oct 19 '09 at 22:13

0

Have a look at this site - I assume you want a two column layout - this site will show you how to do what you want. Hope it helps.

answered Oct 19 '09 at 22:13

Dieter G

930
2
9
24

CSS: navigation bar to expand to the whole page height

3 Answers3