Jump to content

DIV with 100% Height Doen't Expand with Page


Jesdisciple

Recommended Posts

My tableless layout is working great, except that the left column takes 100% of the page's default height as specified by the browser - not the actual height. This is most noticeable at the left-bottom of http://jesdisciple.110mb.com/site.php because the border seems too short. It also causes problems when the text in that DIV extends past the 100% and rips the page apart, but I don't expect that to be a problem (because I only noticed it while debugging the PHP).How can I make it fluid like it's supposed to be? Thanks!

Link to comment
Share on other sites

Now, you realize that 100% means 100% of the space available in the window and load time, right? (You've been around.) And the assignment is fixed, it doesn't get recalculated.Now, you may end up wrapping things differently, but the general principle is this. For DIV A to grow, its height must be set to auto (the default, I believe). If its height must depend on DIV B's height, then DIV A must contain DIV B, even if that doesn't make the most semantic sense.A way that does make semantic sense is if both divs are contained by a wrapper (DIV 0) that grows and shrinks with the tallest interior div.If the gold border were part of the div on the right, it would grow naturally, yes?I would really like it if CSS performed calculations for one element based on values from another. But even the spec for CSS 3 doesn't have that. (You can do it in javascript, with all that entails, but a simple CSS declaration would be so sweet.)

Link to comment
Share on other sites

Actually, I thought that too, but when I resized Firefox the border resized with it.

A way that does make semantic sense is if both divs are contained by a wrapper (DIV 0) that grows and shrinks with the tallest interior div.
This is what I tried to accomplish, but the sibling doesn't grow with the parent.Yes, the border does expand with the element. However, #contentcolumn doesn't fill #contentwrapper enough and so its border looks strange. Meanwhile, the border of $contentwrapper (currently activated) doesn't show at all.I actually consider it unintuitive that percentages are static; a percentage is, by definition, a function of another number, which to me implies dynamism. (Firefox apparently implements them as functions, but not of what I would expect.) And anyway, em's are dynamic functions of the font-size, so why is a percentage not a dynamic function of the container's dimensions? (That's partly rhetorical; you don't have to answer it.)
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...