Resizable div tag in html as per window resize

Question

My code is as below:

<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >

content

</div>

Here declared div working as a scrollable div but it doesn't resize as per window resize.

I have a situation where I need, on the same line, When the window is resized and the div's eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.

Please Help...

Answer 1

<div id="frame1" style="display:block; width: 87.5%">

content

</div>

Height will increase based on content

Answer 2

Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.

I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.

Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).