CSS: navigation bar to fit full page height
I'm not very good with CSS, but hope someone here can help. I have the following layout. (I removed my content to make it easier to see)
<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 looks like this:
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 not sure how to get "navBar" as page height. I tried adding height: 100%, but that doesn't work.
Thanks, Matt
source to share
Providing an element height: 100%
will give it a height equal to the height of its containing element, which in your case is #body
. Since the body in your example is only so large that you need to keep its contents, it #navBar
will be 100% of this height.
To fix this, you can do #container
and #body
height:100%
to make them as tall as the body tag that spans the entire page:
#container {
height:100%
}
#body{
height:100%;
}
In the interest of completeness, you can also set up top
and bottom
in #navBar
:
position: absolute;
top: 20px;
bottom: 60px; /* height of footer */
Play with This JS Fiddle to understand the difference . Share with properties height
and top, bottom, position
to see how your changes affect the layout; just don't use both positioning methods at once!
source to share