Jquery - resizeable DIV with child (100% height & width) and dynamic content

i have a DIV with dynamic content and resize function.

Here is an example -> http://jsfiddle.net/UsRuh/4/

The problem is the dynamic content.

Example -> http://jsfiddle.net/UsRuh/5/

It will only work when i set the padding from the #main DIV higher.

Example -> http://jsfiddle.net/UsRuh/6/

Is it possible (only with CSS, no JS!) to resolve this problem?

CSS

#header {
    background-color:#faf; }

#main {
    position: absolute; top: 18px; left: 18px; width: 384px; height: 157px;
    padding:0px 0px 80px 0px;
    position: absolute;
    overflow:hidden;}

#scrollDiv {
    background-color:#ccaacc;
    height: 100%;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 25px;
    width: 100%; }

HTML

<div id="main">

    <div id="header">Head</div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

    <div id="scrollDiv"> some dynamic content width "invisible" scroll&开发者_StackOverflow社区lt;br />text text text text text text text text text text text text text text text text text text text text text text text text text text text text .... ext text </div>

    <div style="background-color:#555;"> some dynamic content text text text text <br /> some dynamic content</div>

</div>

EDIT: If no other solution exists, please tell me.

---

There are no CSS-only crossbrowser solutions available.

The only way to achieve it now — to use extra wrappers and display:table + display:table-raw, so it would look like that: http://jsfiddle.net/kizu/UsRuh/28/

The problem still: IE. IE6 and IE7 won't understand table values of the display property.

So there are only two possible ways to overcome IE:

• use expressions (but it's the same as the use of JS)
• use unsemantic table instead of divs, so it would work everywhere.

That's really a big problem and table layout was the only posible solution for a long time. However, in the future (and now in webkit and firefox) we can try to use the flexible box model.

With flexible box model it's realy easy to achieve what you want only with CSS: http://jsfiddle.net/kizu/UsRuh/29/

And that's why the flexible box model appeared. Too sad, it's availability is still not perfect.

---

If you have only one div with dynamic content below scrollable div you make it snap to bottom with absolute positioning. Just make sure parent div (#main) has relative or absolute positioning.

• Small dynamic content: http://jsfiddle.net/yYwv5/
• Large dynamic content: http://jsfiddle.net/sH8eJ/

---

I have made a slight change in CSS and can be seen at: http://jsfiddle.net/KuzTB/

I have included a pseudo-class of CSS3: nth-child(n) and applied it on last inner div.