Forum Moderators: not2easy
I've tried the min-height=100%, but since the content within the navbar has already been covered, the bar only stretches as long as the height of the browser. then stops. Any suggestions?
I just create a background for the body (usually different color with the width of the menu). Repeat y and problem solved.
Yeah it isn't as cool as trying to get it to work just right with CSS and 100% heights, but gosh darn it gets the job done.
#navbar {
position: absolute;
left: 0px;
top: 100px;
min-width:11em;
padding-top:5px;
background-color: #bfc789;
min-height: 100%;
}
html, body {
height: 100%;
}
the height:100% takes the height of the direct parent if it is explicitly set and different from auto.
Only the root element is an exception in that is has the height of the viewport.
Hence the behavior is expected.
Now since you use absolute positioning you have some extra means:
you can set both top:0 and bottom:0: it'll give it the same height as it's reference. That reference is the closest parent that has gained position. The easiest to make a box gain position is to set position:relative on it.
IE6 will not be happy about setting both top and bottom and not specifying the height, but it can be taught with IE7.js .
body, html {
height:100%;
}
#navbar {
min-width:11em;
background-color: #bfc789;
min-height: 100%;
zoom:1; /* ie fix */
position:relative;
}
Do not use top or bottom margins or padding and no absolute positioning on the div you want to be 100%. This will cause gaps and and scrolling. Remember % is the % of the users screen resolution. It works like this: If you have it set up to be 100% in height add top padding of 50px it's saying that the content is going to be 100% plus 50px.
If you need the positioning to be just right add a div inside the 100% div and give that one the padding and positioning that is needed.
Try the above and see how that works for you.
[edited by: CSS_Kidd at 6:39 pm (utc) on April 28, 2009]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>untitled</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
html {
height: 100%;
background-color: yellow;
}
body {
min-height: 100%;
width: 770px;
background-color: orange;
margin: 0 auto;
position: relative;
padding-left: 200px;
}
.menu {
position: absolute;
top:0;
bottom:0;
left: 0;
width: 180px;
background-color:red;
list-style: none;
}
</style>
</head>
<body>
<ul class="menu">
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
</ul>
<p>Very long text goes here, make sure it is longer than
the viewport is tall</p>
</body>
</html>
I did center the body to add some challenge to it, if not needed: remove the width and the auto margins on the body.
How does it work:
Removing default margins and paddings (body has some of them in most browsers and they will interfere here)
html get the height of the root element (the height of the viewport)
body gets the minimal height of its direct parent (html) which does have an explicitly set height.
The relative positioning makes body gain "position": absolute children will reference the body, not the viewport anymore.
The padding is to make sure it'll not have stuff under the menu.
.menu: we do not et a height, but let the browser calculate it by using absolute positioning and setting both the top and bottom to be at the same spot as the top and bottom of the element it references (body). Essentially this makes it as tall as the body.
When will this fail ?
- in a browser that doesn't allow top and bottom to be set such as IE6 (can be fixed with IE7.js)
- if the menu would get longer than the main content and the viewport would be too small to show the menu (so it is not a generic solution for a 2 col layout)
I only tested it in FF, safari and opera, didn't bother with IE.
