0

First of all, I'm NOT Looking for Javascript Solutions.

I'd also prefer solutions NOT to use CSS3. If possible (This is for support)

This can be done horizontally. As shown at xHTML/CSS: How to make inner div get 100% width minus another div width

I want to know if something similar can be achieved vertically.

I am aware that CSS3 solutions may be able to be fabricated using the calc(); operator. However I'm looking for a more old school pre-CSS3 solution, so I can get as much support as possible.

Say there is a parent container who's dimensions are set by the user via resizing.

There are two inner divs, one above the other.
 - one is as high as its content
 - one fills the rest of the height and scrolls if overflows.

The scrolling container is above the growing container.

Here it is, explained a bit simpler:

<div id="parent">
    <div id="scroll">
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content<br/>
        content<br/>content<br/>content<br/>content<br/>content
    </div>
    <div id="grow">
        as this content grows,
        the above content above gets smaller,
        but is scrollable,
    </div>
</div>

#parent{
    height : user defined in pixels / can randomly change
    width  : user defined in pixels / can randomly change
}

#grow{
    width  : as wide as parent
    height : as_height_as_contents
}

#scroll{
    width    : as wide as parent
    height   : whatever height is remaining
    overflow : auto /* scroll if necessary */
}

So is this possible?

Community
  • 1
  • 1
AlexMorley-Finch
  • 6,785
  • 15
  • 68
  • 103

2 Answers2

0

This isn't possible.

The reason which if you bear with me is down to the text which creates new lines. To handle this the scroll div must be set to a size e.g. px or %. Obviously px will stop it form resizing so it has to be %. Setting it as 100% would cause it to take the entire box and setting it to 50% would simply set it to take half the box. It is still not dynamic enough.

Why did the div box need to be set to a specific size? Because the txt would simply cause the div box to expand if it is set to height:auto; Even it we were to set the box to 100px the text would still go over the DIV unless we set an overflow auto which is not really relevant as we have failed with a fixed size.

Mike
  • 61
  • 2
  • I thought as much. The need is for a simple widget. The scrollable area is the widget, and the bottom area is a footer section with changing text during certain events. I have the javascript working. I was just wondering if a CSS solution existed so I don't have to do the work in Javascript – AlexMorley-Finch Feb 12 '14 at 08:30
-1

The closest thing you can get without js or calc is something like this

#parent{
    height : 300px; /* User defined in pixels / can randomly change */
    width  : 500px; /* User defined in pixels / can randomly change */
}
#scroll{
    height   : 100%;
    overflow:auto;
}

Demo

Another option would be to use flexbox, but that has less support than CSS3

Otherwise it is impossible

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147