Question

我尝试创建一个仅在元素不适合默认区域时显示滚动条的div。

＆＃13;

<div style="overflow-y: auto; height: 36px;">
  <img src="." width="36" height="36" />
</div>

＆＃13;

不幸的是，在div的底部有一些填充，因此即使理论上img和div应该是相同的高度，滚动条也会始终显示。我能够在Firefox和Chrome中重现，所以它看起来不像浏览器错误。

为什么会这样？

Answer 1

尝试将font-size: 0;添加到父div：

<div style="overflow-y: auto; height: 36px; font-size: 0;">
  <img src="." width="36" height="36" />
</div>

Answer 2

尝试摆脱父div或页面中的填充。

<html>
  <body style="margin: 0; padding: 0;">
    <div style="overflow-y: auto; height: 36px; margin: 0; padding: 0;">
      <img src="." width="36" height="36" style="margin: 0; padding: 0;"/>
    </div>
  </body>
</html>

Answer 3

您只需在float

上设置<img>即可

<div style="overflow-y: auto; height: 36px;">
  <img src="." width="36" height="36" style="float:left"/>
</div>

为什么这个元素会导致大小相同的容器溢出？

3 个答案: