使用溢出调整元素大小：自动考虑滚动条答案

【问题标题】：Resize an element with overflow:auto taking scrollbars into account使用溢出调整元素大小：自动考虑滚动条
【发布时间】：2009-12-25 15:38:59
【问题描述】：

我需要制作一个图像查看器：左侧有一个可调整大小的 TD，其中包含 div 和图像/视频。在右侧 TD 中有 cmets。调整图像的大小，以便可以使用滚动条（水平或垂直）查看具有高纵横比的全景图，但仅在必要时才显示滚动条。问题是如何计算正确的宽度/高度。

这是我使用的文档结构：

<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>

我想调整#frame 的大小，使其类似于min(size of #container, max(size of #frame, size of #content))。换句话说，调整它的大小，使每个尺寸在#container 内最大化，但#content 和#frame 之间没有空格。

我对每个维度进行最小（最大...）计算，同时考虑边框、填充、边距。但随后它会留下滚动条。

我尝试检查 clientHeight 和 style.height 之间的差异，如果 #frame 仍然小于 #container，则添加差异。但这不太可靠，因为滚动条会单独或一起消失。

有没有现成的解决方案？

【问题讨论】：

签出this

标签： javascript css overflow

【解决方案1】：

我想到了以下解决方案：

找出元素的大小、装饰物、可用空间
将容器大小调整为内容大小，但不能超过父级
如果容器小于所需大小，则表示有滚动条，因此其他维度需要扩展。尝试扩展它。

【讨论】：