I am facing an issue with a DIV containing dynamic content and resize function.
You can see an example here -> http://jsfiddle.net/UsRuh/4/
The problem arises with the dynamic content.
Example -> http://jsfiddle.net/UsRuh/5/
The solution seems to be setting higher padding for the #main DIV.
Example -> http://jsfiddle.net/UsRuh/6/
Is there a way to resolve this issue using only CSS, without involving JavaScript?
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<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 there are no other solutions available, please inform me.