Log in

View Full Version : 100% height not quite working


dtuch_master
06-08-2007, 08:16 PM
Alright. On this page I'm making I have a bar 26px wide with a background color on the very left of the page. I need this to span all the way down the page, as tall as the content is on any page. So I simply did a

<div class="leftsidebar"></div>

and the css is

.leftsidebar {
background-image:url(leftbar_bg.jpg);
background-repeat: repeat-y;
height: 100%;
width: 26px;
float: left;
position: absolute;
z-index: 2;
}

But... it doesn't span all the way down the page. It stops short. I added a SS of what the page looks like.

http://img517.imageshack.us/img517/1285/blacklineks2.jpg
riptide
06-08-2007, 08:51 PM
is there a table in this page...also you could try 110&#37;
dtuch_master
06-08-2007, 09:26 PM
No tables, just all divs. I'll try 110&#37;
dtuch_master
06-08-2007, 09:46 PM
Hmm. That didn't seem to help.
Veronica
06-08-2007, 10:59 PM
A couple of things to try. First, add height to your body and html:

html {height: 100%;}
body{height: 100%;}

Also, the div will be 100% height of its containing div, so make sure it isn't in another div with a shorter height.

Finally, if that doesn't work, check your doctype. You might be better with something like

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
dtuch_master
06-09-2007, 12:48 AM
I tried all of that, and none of it seems to work. I have the div by itself, not contained in anything. I added those styles and changed the doc type and it still doesn't seem to do it.

I got someone else to look at my page and they said they couldn't see the black bar at all except for a very small bit of it at the very top... weird.
Trinithis
06-09-2007, 01:32 AM
In addition to

html {height:100&#37;;}
body {height:100%;}
try

* {padding:0px; margin:0px;}

I've never tried the above stuff before, but I have encountered the same problem you have, and the height/width percentages vary from browser to browser.
dtuch_master
06-09-2007, 02:56 AM
Thanks for the help so far, but that didn't work either. :(
dtuch_master
06-10-2007, 01:07 AM
Anyone have any other ideas? Am I correct in having it in its own div instead of being contained in one?

I don't really have a container div or a master div... everything is pretty much on its own.
dtuch_master
06-12-2007, 10:30 PM
Here's another screenshot of a different page. As you can see on this one it doesn't even come close to the bottom of where the products are.

Anyone have any other ideas? :(

http://www.ekornmeyer.com/productsss.jpg
dtuch_master
06-13-2007, 04:06 AM
I think I'm getting somewhere. I'm pretty sure it is a float issue and I need to fix it with

clear: both;

But I don't know where to put it. I have tried everything I can think of but nowhere I put it works. =/
boogyman
06-13-2007, 01:40 PM
what you are attempting to do is something called Faux Columns (http://alistapart.com/articles/fauxcolumns/). 100% height doesnt work within the entire page itself, but the content contained inside the tag. Read that article and you will find that there is a fix for such a thing.

It also explains float and clear
eleven82
06-13-2007, 03:58 PM
I would either make a div tag with a clear:both; and put it at the end before the footer, if there is one, or else before the </body> other wise you can make it a small background image and repeat it y.
pegasus58
07-05-2007, 05:46 AM
Have a look at: http://www.alistapart.com/articles/multicolumnlayouts/