height:100% not working as it should, or is it? [Archive]

Click to See Complete Forum and Search --> : height:100% not working as it should, or is it?

Markstar

02-15-2006, 12:16 PM

Hi,
all my main site content is in a paragraph that looks like this:
<div style="position:absolute; top:100px; right:0px; left:213px; min-height:80%; border-left:3px solid #13EFE7; border-top:3px solid #13EFE7"> ... </div>

As you can see, I moved it a little down and right (for the title and menus). Since I got a frame on two sided I would like the page to fit on the right which I managed to do with the "right:0px". However, I would also like the page to go all the way down if there is not enough content to fill the page (of course, if there is more than can fit on the page, you should still be able to scroll down).
The problem is that if I use "height:100%", the page goes down a little to far, I guess by the exact amount that I moved the paragraph down. :confused:

Is there any way I can get the paragraph to fill the whole page without the scrollbar (when it's not needed)? :confused:

Thank you in advance!!

ShrineDesigns

02-15-2006, 02:45 PM

here is how you get rid of the scrollbar in IE/* IE scrollbar fix */
body {
width: 99.9999999999999999%;
overflow: auto;
}
html > body {
width: 100%;
overflow: inherit;
}IE doesn't really support "right" or "bottom" properties, only "left" and "top"

you could try to offset the top: 100px with margin-bottom: -100px;

Kravvitz

02-15-2006, 03:03 PM

IE5-6/Win does support bottom and right, but incorrectly ignores them if the property for the offset from the opposing side is also set. (I haven't checked to see if they fixed it in the IE7 betas yet.)

Markstar

02-15-2006, 04:30 PM

Thanks you two for the answers but I not only have the problem in IE but also in FF. Plus, afaik, the scrollbar fix is to get rid of the scrollbar when it's really not necessary. In my case, the page does go on for at least an extra 100px no matter what so there it is reasonable that the scrollbar is there.

Here is an example (http://markstar.sam-city.com/en/forum.html)

IE5-6/Win does support bottom and right, but incorrectly ignores them if the property for the offset from the opposing side is also set. (I haven't checked to see if they fixed it in the IE7 betas yet.)
Hmm, I can't confirm that with the opposing sides. After all, as you can see in the first post, I do have an offset from the left but also a set distance from the right (0px). All I want is that the page ends right at the bottom when there is no additional text. :confused:

Kravvitz

02-15-2006, 04:41 PM

Your problem is that 100% + 100px != 100%.

For browsers other than IE, you can change "min-height:80%' to "bottom:0".

Why are you using absolute positioning anyway?

Markstar

02-15-2006, 05:34 PM

Your problem is that 100% + 100px != 100%.Yes, exactly. That's why I'm looking for a way to circumvent this.

For browsers other than IE, you can change "min-height:80%' to "bottom:0".No, I've tried that. The page still goes on for the extra 100px. :mad:

Why are you using absolute positioning anyway?Because I simply don't know of a better way of doing it. I used tables before but now that I changed to JS for the basic layout of the page (saves me the trouble of editing every page when I make changes), I don't see any other way. :o

Kravvitz

02-15-2006, 06:18 PM

JS? That's short for JavaScript, which I don't see any evidence of its use. Don't you mean CSS?

Take a look at this:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
html>body {
min-height: 100%;
height: auto;
}
#outermost {
background-color: #9f9;
color: #000;
position: absolute;
top: 100px;
bottom: 0;
left: 213px;
right: 0px;
border-left:3px solid #13EFE7;
border-top:3px solid #13EFE7;
padding: 0 1em 1em;
}
</style>
</head>
<body>

<div id="outermost">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec scelerisque
purus vitae wisi accumsan fringilla. Aliquam nibh elit, imperdiet eu,
scelerisque at, condimentum eget, leo. Nam dolor. Etiam rutrum. Nullam nulla
nibh, sollicitudin in, dictum ut, ullamcorper id, mauris. Aenean ultricies,
erat quis aliquet pellentesque, sapien nulla posuere nunc, sed tincidunt wisi
wisi id quam. Donec magna ante, pellentesque eu, posuere sed, ultrices sed,
velit. Sed id velit. Quisque sollicitudin lacus a ante. Etiam aliquam. Nulla
vitae lectus. Mauris ante neque, blandit id, vehicula nec, iaculis vitae, wisi.
Mauris quis elit sed quam interdum sollicitudin. Curabitur congue egestas
velit. Nulla feugiat placerat felis. Praesent felis tellus, rutrum et, faucibus
eget, sagittis non, ligula. Fusce porta, lorem at convallis vehicula, arcu eros
egestas tellus, in bibendum ante metus vel nisl. Sed erat nulla, vulputate vel,
fermentum et, feugiat nec, eros. Pellentesque augue tortor, rutrum eu, mattis
id, ornare vitae, sapien.</p>
</div>

</body>
</html>

I find that floats and margins can be very useful for positioning elements.

http://www.alistapart.com/articles/negativemargins/

http://css.maxdesign.com.au/floatutorial/index.htm
http://www.brunildo.org/test/#flo

http://garyblue.port5.com/webdev/floatdemo.html
http://www.csscreator.com/attributes/containedfloat.php
http://www.positioniseverything.net/easyclearing.html
http://www.quirksmode.org/css/clearing.html
http://css-discuss.incutio.com/?page=ClearingSpace

Curing Float Drops and Wraps (http://nemesis1.f2o.org/aarchive?id=11)

Markstar

02-16-2006, 09:01 AM

Wow, thanks for making such a fine example.

The problem with that solution is that the border ends right there then and if there is more content than can fit on one page, the rest of the page will not have a border. :(