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!
Comments
Post a Comment