100% height with CSS

**Ixonal** · 03-05-2009 02:24 AM

so yeah, makin a site and trying to get a div to be a left bar that's 100% height. it just seems it's stuck at 100% of the default size of the window, so if the content is larger than that, it won't extend to the new size of the document. any ideas?

here's the location of the website
http://www.peacefuloaksbandb.com

and here's my stylesheet

Code:

html {
  height: 100%;
}

body {
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  height: 100%;
}

a.nav {
  color: green;
  text-decoration: none;
}

a.nav:hover {
  text-decoration: underline;
}

span.title {
  font: 20pt bold sans-serif;
}

#logoDiv {
  position: absolute;
  top: 0px;
  left: 180px;
  width: 600px;
  height: 150px;
}

#navDiv {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 170px;
  height: inherit;
  min-height: 100%;
  color: green;
  font: 14pt sans-serif;
  text-align: right;
  background-color: #ffe8b1;
  padding-right: 5px;
  border-right: 2px solid #7e531a;
}

#contentDiv {
  position: absolute;
  top: 165px;
  left: 180px;
  width: 600px;
  font: 11pt sans-serif;
  color: green;
}

**dyreplus** · 03-05-2009 03:17 AM

I believe you will need some javaScript to determine the innerHeight of the user's browser and then have it dynamically figure out how tall to make the side panel.

Check this site on liquid design for a tutorial.

Note: to make it also work in firefox, you need to change the onReload command to

Code:

onResize="window.location=window.location;"

Hope this helps :3

**Sohail** · 03-05-2009 03:42 AM

Why don't you use a specific height then? I would suggest using AJAX to keep it at 100% and make it follow you down the page...

**Ixonal** · 03-05-2009 03:45 AM

Originally Posted by Sohail

Why don't you use a specific height then? I would suggest using AJAX to keep it at 100% and make it follow you down the page...

well, I suppose I could use javascript to do that, I wouldn't need ajax though unless I wanted to constantly reconstruct the menu. but still, it shouldn't be quite that difficult to do this >.<

**dyreplus** · 03-05-2009 03:50 AM

it SOULDN'T be, no...
I'm looking at your design and wondering why you need such a thing, anyway, though. Your menu is fine as is... or are you implying you don't want that sidebar colour going all the way down the page and being empty? If so, I think it would be best to just set the height of that area.

If you plan on having huge content pages... rather than the whole menu following down the page, usually just a floating "TOP" link/image works as well.

By the way, I recommend adding

Code:

margin-left:20px;

to the #contentDiv in your CSS, so that there is some breathing space in between your navigation and content area.

**Ixonal** · 03-05-2009 04:59 AM

yeah, been thinkin it could use some space, but right now I'm dealing with first things first. dunno if you're seeing the same thing as me, and as they say, a picture is worth a thousand words, so here's 2k for ya

http://img21.imageshack.us/img21/6320/screenshot1r.jpg

http://img19.imageshack.us/img19/7052/screenshot2q.jpg

might just be a matter of different browser or OS, but it's just not goin all the way down for me.

**Anna** · 03-05-2009 11:25 AM

I'll try to explain how you can deal with that.

Create one div that will act as a container for all content, including the menu. It should then be the first div opened after the <html> tag and the last one to close just before the </html> tag.

Then the menu div will extend to be 100% of the (dynamic) height for such container. The outer container should have no margin, and no padding (well you can add that to it if you want, but that would change the look of the site as it is now)

**sourfacedcyclop** · 03-05-2009 11:44 AM

You could try using position:fixed; on you sidebar.

**dyreplus** · 03-05-2009 03:46 PM

OH! My resolution is HUGE so I didn't notice that... but you want the exact opposite from what I was explaining!

LadyAnna has your answer, but to put it a more straight-forward way:

Code:

<div id="everything">
   <div id="logoDiv"></div>
   <div id="contentDiv"></div>
   <div id="navDiv"></div>
</div>

However, this may break because of your position absolute-ing. You can try removing your positioning and replacing it with:

Code:

float:left;

You may need to rearrange your html so that the navigation remains on the left, like so:

Code:

<div id="everything">
   <div id="navDiv"></div>
   <div id="logoDiv"></div>
   <div id="contentDiv"></div>
</div>

**Anna** · 03-05-2009 03:56 PM

there's actually another easy solution as well... create an image that is 1 or 2 pixel in height, and your menu + 5 pixels wide, colored as you want your menu to be, and use that as background. css: background url('path/image.gif') repeat-y left;

that would make the image stay on the left side of the page and fill the left side all the way down.

Thread: 100% height with CSS

LinkBack

Thread Tools

Display

100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Re: 100% height with CSS

Similar Threads

CSS Errors

help!!!!!

can anyone convert a CSS into an IPB skin for me?

Drop-Down Menu problems

Getting a Div to stretch the whole height of a page

Posting Permissions