Resize an element with overflow:auto taking scrollbars into account

Question

I need to make an image viewer: on the left there's a resizeable TD with the div and image/video. In the right TD there are comments. Images are resized so that those panoramic, with high aspect ratios, were viewable with a scroll bar (horizontal or vertical), but scroll bars were shown only when necessary. The issue is how to calculate the correct width/height.

Here's the document structure I work with:

<table><tr>
   <td id="container" width="100%" style="height: 100%">
       <div id="frame" style="border: 7px solid; width: 200px; height: 150px; overflow: auto">
           <img id="content" src="..." />
       </div>
   </td>
   <td width="200">some comments</td>
</tr></table>

I want to resize #frame so that it were like min(size of #container, max(size of #frame, size of #content)). In other words, to resize it so that each dimensioned were maximized inside of #container, but there were no white space between #content and #frame.

I do this min(max...) calculation on each dimension, taking into account borders, paddings, margins. But then it leaves scrollbars.

I try to check the difference between clientHeight & style.height and add the difference if #frame is still smaller than #container. But this isn't quite reliable because of scrollbars that disappear alone or together.

Is there any existing solution?

Answer 1

check out this

Answer 2

I came to the following solution:

1. figure out the size of the element, of it's decorations, the available space
2. resize the container to the content size, but no more than parent
3. if the container is smaller than the desired size, this means there are scrollbars, so the other dimension needs extension. Try to expand it.