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.

**riptide** · 06-08-2007, 08:51 PM

is there a table in this page...also you could try 110%

**dtuch_master** · 06-08-2007, 09:26 PM

No tables, just all divs. I'll try 110%

**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

Code:

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

try

Code:

* {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?

Thread: 100% height not quite working

Thread Tools

Search Thread

100% height not quite working

Bookmarks

Bookmarks

Posting Permissions