Topic: 100% height

Is this possible in CSS?? I'm stumpped!

Well, in CSS terms a size of 100% is defined as being 100% of it's containing element, whereas most of the things I've seen will reder it as 100% of it's contained element. If it's possible... I'm not really sure. It's supposed to be. But there's a world of difference between 'supposed' and 'works'.


Justice 4 Pat Richard

Yes, becuase code and nothing else tells a lot reisio...


Justice 4 Pat Richard

It does if you read it

As you said skaaryy, 100% means 100% of the containing element.

The two containing elements most commonly forgotten about are the HTML and BODY tags. You need to set them to 100% before you worry about anything else.

This discussion at the GN should be immensely helpful:
http://www.gurusnetwork.com/discussion/thread/2907/



(Edited by DL-44 on 06-05-2005 15:59)

DL: To me, yes, mate, it does. But it's not me I was talking about there. I, and this may just be my own personal opinion, think that if you're going to put code examples up you should at least explain them for the hard of understanding.


Justice 4 Pat Richard

Sorry, I figured that since the question was about CSS, you would skip to the CSS part of the code, which is merely 4 lines.

The rest is just to ensure that you have a proper source; it should all be familiar, otherwise you have more troubles.

I think perhaps Skaarjj was, like me, just tiring of reisio's glib replies.

O-kay...

That aside....

The question was asked if it was possible.

Code was presented, pretty straightforward, that demonstrated how it was possible.

The bad part: no explanation. Can be confusing for some.

The good part: the answer is there, and anyone not understanding can simply ask for further clarification (or, god forbid, research a little based on what was presented). At this point, such a question, honestly, is of the "rtfm' variety, which tend to get less informative replies.

Given the amazing quantity (and quality) of CSS related information reisio has let loose, I am very apt to let a few glib replies roll out, regardlessl

But anyway -

Question asked, and hopefully answered satisfactorily.

I know that in CSS 100% height is meant with relation to the parent element but i've already tried what reisio showed above. I've made the html and body tages 100% height but nothing happens. Niether browser recognizes it. Infact i've even added 100% height to the main container but still nothing happens!

Also I've noticed that in IE when i fidget around with the heights it for some reason does make a 100% but with a little extra! It adds space below the browser viewfinder...

I'm in college right now and I can't upload an example of what I've done so far will do once i get home. I've got another IE related bug as well to discuss.

You could just post the source code.

quote:

---

templar654 said:

I'm in college right now...

---

I would if I was at home

Ah, I thought you just couldn't upload from college...I guess your source is just at home.
My mistake; we'll get it sorted out when you get home, then.

I'm back home!

Here's the CSS I'm using for the 100% height stuff:

body {
  margin: 0 auto; padding: 0;
  width: 744px; text-align: center;
}

html, body { height: 100%;}

#main {
  margin: 0; padding: 0;
  text-align: left; width: 744px;
  height: 100%;
}

This doesn't render anything in either browser. I have another div in the XHTML structure called #content, when I place height: 100% to that in the CSS IE stretches it to the bottom plus more and that's bad...

... my other problem is this navigation I have, I don't understand how this happened, I've made this type of a nav before and this is the first time I'm facing this problem. I've uploaded an example of what the problem is here. Know what's wrong??

quote:

---

templar654 said:

This doesn't render anything in either browser. I have another div in the XHTML structure called #content, when I place height: 100% to that in the CSS IE stretches it to the bottom plus more and that's bad...

---

Well it should work and the extra space in IE could be many things - going to need to see the entire source.

quote:

---

templar654 said:

... my other problem is this navigation I have, I don't understand how this happened, I've made this type of a nav before and this is the first time I'm facing this problem. I've uploaded an example of what the problem is here. Know what's wrong??

---

Replace this...

#nav ul li {
  list-style-type: none;
  margin: 0; padding: 0;
}

...with this...

#nav ul li {
  list-style-type: none;
  margin: 0; padding: 0;
  display: inline;
}

Replace this...

body {
  margin: 0 auto; padding: 0;
  width: 400px; text-align: center;
}

/* layout */

#nav {
  margin: 75px 0 0 0; padding: 0;
  width: 400px; text-align: center;
}

...with this...

body {
  margin: 0 auto; padding: 0;
  width: 400px;
}

/* layout */

#nav {
  margin: 75px 0 0 0; padding: 0;
  width: 400px;
}

Add this:

#nav ul li a {
  display: block;
  height: 100%;
  padding: 4px 0 4px 10px;
}

Replace this...

#nav ul li a:link {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  padding: 4px 0 4px 10px; margin: 0;
}

#nav ul li a:visited {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  padding: 4px 0 4px 10px; margin: 0;
}

#nav ul li a:active {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  padding: 4px 0 4px 10px; margin: 0;
}

#nav ul li a:hover {
  font: 11px Verdana, Arial, sans-serif; color: #000;
  text-decoration: none; display: block; background-color: #c4e52a;
  padding: 4px 0 4px 10px; margin: 0;
}

...with this...

#nav ul li a:link {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  margin: 0;
}

#nav ul li a:visited {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  margin: 0;
}

#nav ul li a:active {
  font: 11px Verdana, Arial, sans-serif; color: #fff;
  text-decoration: none; display: block;
  margin: 0;
}

#nav ul li a:hover {
  font: 11px Verdana, Arial, sans-serif; color: #000;
  text-decoration: none; display: block; background-color: #c4e52a;
  margin: 0;
}

Add this:

p { margin: 1em 0; }
h1 { margin: 1em 0; }

IE renders 100% in a faulty way. it will render it as 100% of the containing window, and if there's margins or padding on top of that pretty soon you start scrolling outside the screen for no damn reason.


Justice 4 Pat Richard

quote:

---

Skaarjj said:

IE renders 100% in a faulty way. it will render it as 100% of the containing window, and if there's margins or padding on top of
that pretty soon you start scrolling outside the screen for no damn reason.

---

Example?

(Edited by reisio on 06-06-2005 15:37)

Actually that was all the CSS for the height problem still if you want the rest here:

body {
  margin: 0 auto; padding: 0;
  width: 744px; text-align: center;
}

html, body { height: 100%;}

/* layout */

#main {
  margin: 0; padding: 0;
  text-align: left; width: 744px;
  height: 100%;
}

#head {
  margin: 0; padding: 0;
  background: url(images/head.gif) top left no-repeat;
  width: 744px; height: 160px;
  float: left;
}

#content { margin: 0 0 0 24px; padding: 0;}

#left {
  background-color: #b4e140;
  width: 119px; text-align: left;
  margin; 0; padding: 0;
  float: left;
}

#center {
  width: 452px; text-align: center;
  margin: 0; padding: 0;
  float: left;
}

#right {
  background-color: #f5f5f5;
  margin: 0; padding: 0;
  width: 149px; text-align: left;
  float: left;
}

I'm starting to think it's the floats that are messing up the 100% height... as I recall I don't think a div which has floats in it has any height!!

That said... how am I supposed to make my layout then with the floats, its a three column layout!!

It's much simpler to fix things if you provide the full source: CSS, HTML...everything.

*looks embarassed*

hee hee... silly me umm I forgot to add the sliver in the main container ooo it works now...

Cool.