100% height with CSS

I

Ixonal

New Member
Messages
29
Reaction score
0
Points
0
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

dyreplus

New Member
Messages
29
Reaction score
1
Points
0
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

Sohail

Active Member
Messages
3,055
Reaction score
0
Points
36
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...
 
I

Ixonal

New Member
Messages
29
Reaction score
0
Points
0
Sohail said:
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...
Click to expand...

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

dyreplus

New Member
Messages
29
Reaction score
1
Points
0
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. :)
 
Last edited:
Anna

Anna

I am just me
Staff member
Messages
11,750
Reaction score
581
Points
113
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)
 
dyreplus

dyreplus

New Member
Messages
29
Reaction score
1
Points
0
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

Anna

I am just me
Staff member
Messages
11,750
Reaction score
581
Points
113
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.
 
I

Ixonal

New Member
Messages
29
Reaction score
0
Points
0
thanks ladyanna. I'll implement that right away and tell ya how it goes.

nope, still have the same issue. btw, the background of the sidebar will be a lil lower at this point cause of some padding, but it's still not going all the way down.
Edit:
bump just in case
 
Last edited:
I

Ixonal

New Member
Messages
29
Reaction score
0
Points
0
after trying and failing in just about every way imaginable, I used a rather ugly workaround. I made both relative positioned and stuck 'em in a table. I hate doin it like that, but it works.
 
You must log in or register to reply here.
Top