div height maintaining

[amyth77]

hi all..
i have a query on DIV height maintaining, using css..

please check the attached layout sketch..
it's a css layout with no tables. just divs..
am using iframes inside the div.. it's an attempt at migrating a multi-framed page into iframes..


required: div 3 and 4 should get a scroll each if their content overflows.

am able to do all these except that, am not able to get the divs 3 & 4 to fit to the 100% of the remaining space. It goes down by the combined height of div 1 & 2..

any ideas?

thanx in advance

[djr33]

Hmm... I'm not sure if there is a *better* way, but here's one solution. At least it works with tables.

Just set it up like this:

<div height="100%">
<div name="1" height="200"></div>
<div name="2" height="200"></div>
<div name="3" width="200"></div><div name="4"></div>
</div>

That should help.

Doesn't use CSS... not sure how that would relate. I suppose you could use it to set the heights or something, or maybe for a more complex setting to make them take the remaining size, but if there's a hole to fill, set by the 100% div, then they should all space out nicely.

[mwinter]

it's an attempt at migrating a multi-framed page into iframes..

You should probably be aiming to remove frames entirely. It is rare for frames to ever be necessary.

required: div 3 and 4 should get a scroll each if their content overflows.

You should probably get rid of that, too. Independent scrolling windows aren't usually a good thing.

am able to do all these except that, am not able to get the divs 3 & 4 to fit to the 100% of the remaining space. It goes down by the combined height of div 1 & 2..

any ideas?

You're going to hit quite a snag, due to the broken behaviour of IE. Other, better browsers will handle the following fine:

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#header {
  height: 5em;
}
#site-navigation {
  height: 2em;
}
#wrapper {
  /* The combined height of #header and #site-navigation. */
  top: 7em;
  bottom: 0;
  width: 100%;
  position: absolute;
}
#sidebar {
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: auto;
  width: 10em;
}
#content {
  /* The width of #sidebar, plus some (arbitrary) space. */
  left: 11em;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  overflow: auto;
}

The choice of identifiers are just guesses, reflecting the usual arrangement of that sort of layout; change them as appropriate. The dimensions are arbitrary, but you should stick to those units. In any case, units for any length values that will affect the layout will need to be homogeneous.

The problem with IE in this instance is that when presented with explicitly specified left and right, or top and bottom, offset properties, it will not calculate the width or height, respectively, of the element. Instead, it acts as though the right or bottom properties have an auto value. The only way to get around it is to use an expression (and IE-only feature) to calculate the height properly. Both the #sidebar and #content rules would have the following declaration:

height: expression(document.body.clientHeight - this.parentNode.offsetTop + 'px');

The #content rule would also require:

width: expression(this.parentNode.clientWidth + this.offsetLeft + 'px');

Finally, #wrapper needs:

height: expression(document.body.clientHeight - this.offsetTop + 'px');

IE is such a pain.

I'm not sure if there is a *better* way [...]

As what you posted doesn't work, that is almost a certainty.

<div height="100%">

The div element does not have a height attribute.

<div name="1" height="200"></div>

The div element does not have a name attribute.

<div name="3" width="200"></div>

The div element does not have a width attribute...

<div name="4"></div>

...and, as div elements are block-level, this element will appear below the preceding one, not next to it.

Mike

[amyth77]

Thanx a lot Mike. That works. IE is indeed a pain

This is not a good design, I know that. It's just an R&D we are doing. We have an old frontend coded and working now. It has the header, below which is a navigational bar and on the left, we have thumbnails etc..

But that's entirely in frames with the layout i showed earlier. We need to redo the whole stuff avoiding the frames etc. but we also need to urgently do something to just take out the frames as it's stopping us from adding some extra features. Hence the migration to iframes.

Anyways, thanx a lot for the help.