CSS: navigation bar to expand to the whole page height -

I am not very good on CSS but hopefully anyone can help here. I have low mockups (I've stripped my content to make it easier to see)

  & lt; Body & gt; & Lt; Div id = "container" & gt; & Lt; Div id = "header" & gt; & Lt; / Div & gt; & Lt; Div id = "body" & gt; & Lt; Div id = "navBar" & gt; & Lt; / Div & gt; & Lt; Div id = "main content" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "footer" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Body & gt;  

My CSS is as follows:

  html, body {margin: 0; Padding: 0; Height: 100%; } # Containers {min-height: 100%; Status: Relative; } #header {background: # ff0; Padding: 10px; } #body {padding: 10px; Padding-bottom: 60px; / * Footer height * /} #footer {position: absolute; Bottom: 0; Width: 100%; Height: 60px; / * Footer height / background: # 6 cf; }  

How to get the height of the page "navBar" Now I have tried to add height: 100%, but it does not work

Give an element height: 100% its element Will give an equal height, which is #body in your case. Since in your example the body is only as big as its content needs to be, 100% of # navBar that height will be there.

To fix this, you can see the # container and #body height: 100% In the long run, which takes up the whole page:

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

In the interest of perfection, you can also set top and bottom of #navbar :

Status: Completed; Top: 20px; Bottom: 60px; / * Footer height * /

To understand the difference, play around height and up, down, position Mass around the properties, to see how your change affects the layout; Do not use both positioning methods at once!