View Full Version : DIV, include and relative height

04-01-2009, 03:21 AM

I want to make a page with a cell (3 rows) similar to a frameset, but using php include. Everything goes well with the includes and divs except 1 thing I cannot resolve!

The first row have 100 pixels, the second one must be relative (to adapt to client window), and the third is a foot, with 30 pixels.

The second row have 2 divs, the above one is a menu, in wich you can click and below it loads other pages in the "include" div. The problem is, I want to make the "include" div scrollable (auto). Everything works fine If I set a height property in PIXELS, but I want to make this div to have height in % (to fits windows size, but it is impossible!!! I tried everything and I cannot make it. When I set height at 100% (to the "include" div), it shows complete, without scrollbars and the foot roow dissapear...
To make it simple to explain, it's like a frameset top - middle - bottom, but with cells or divs.

Please someone help me!

04-01-2009, 03:36 AM
Hello pinino,
Let's see some code. What have you got so far?
Put up a test site, that would be best. Then we don't have to guess at anything.

04-01-2009, 03:38 AM
100% equals the whole screen height. It's doing what you told it to do.

set it to less % so there is room left for the last element.

all the heights of your elements added together should equal 100%

04-01-2009, 03:39 AM
Hi! Thanks for your reply...

here it is:

The div that's have the scrollbar, wich have the height property at 100%

04-01-2009, 03:51 AM
Hi! Thanks for your reply...

here it is:

The div that's have the scrollbar, wich have the height property at 100%

here's your CSS
max-height: 400;
min-height: 400;
height: 100%;

which is it? LOL

04-01-2009, 04:36 AM
When you use percentage, you always have to ask "percent of what?". And the answer is always "percent of the parent of this element". So if div#child is given a height of 100%, it will be 100% of div#parent. But 100% of what? What size is the parent? If the parent has no size then percent won't work.

If <body> is the parent, then the body must also have dimensions set because it's parent is <html> which is the only element that contains the full viewport of the browser.

Also, all your CSS settings must be set in some dimension, such as px, percent, ems, etc. You can't leave them as numbers alone.

You need to read about doctypes, which are included in the FAQ at the top of this board. Without one, IE is worse than it normally is.

04-01-2009, 04:05 PM
I've make that you're suggesting but nothing works. It must be a way to do this... is very simple to undertand but hard to make I think.

Please take a look a a new example. (Please test in IE, FF and Others)


This new example shows everything simplest than before. You can view now the different divs (with ID). The "menu" div and the "include" div are inside of "info" div.
The "include" div have a php include wich loads the "agenda.php".

I set a height of 80% / overflow hidden - to the div "info"
I'm using IE8, and Firefox 3, Safari.

In Safari and Firefox, it seems to look right, but in IE8, the scrollbar in the div "include" shows disabled... you cannot scroll. This is the FIRST PROBLEM.

And the SECOND PROBLEM is the HEIGHT in %, because, in all browsers, if you resize the window, you'll note that the foot are not "a real foot" because isn't stick to the bottom of the page...


Any idea?

04-01-2009, 05:55 PM
Hey? Somebody?

I think the problem is the INCLUDE command. When the php calls "agenda.php", it puts the content of agenda.php inside the div, and this is the problem... I don't know how to fix that...

04-01-2009, 06:11 PM
Hello pinino,
Like drhowarddrfine said, you need to have a DocType. See the link in my sig about DocTypes, there is a sticky at the top of this forum about DocTypes as well.

Not sure that will fix your problems but it's a good start.

04-02-2009, 02:17 AM
Hi Guys!

FFFFFFFFFFFFFFFFF.... after several hours and trying everything (what you saying and other things...) I get it to work!!!

Please take a look:

you can test it on IE8, FF 3 and Safari.

But now I have a little problem, wich -I think- it's easy to resolve...

If you take a look to the page (http://audioclic.com.ar/test/testdiv.php)
you'll see the above menu, with submenus, and now the menu is below the main information (with the scroll), what I have to do to set the menu above of all information... I tried to set z-index to the divs, but nothings seems to work... any idea?