javascript - td 内的 Div 未拉伸(stretch)以适应放大和缩小

Question

我有一张 table ，我正在该 table 的其中一张 td 中使用传单 map 。 现在，当我在浏览器中放大或缩小网站时，td 内的 div(传单 map 部分)在 td 本身中不适合或自动调整。它超出了 td 的高度和宽度。有什么建议可以解决这个问题吗？

我创造了一种类似的 fiddle :- http://jsfiddle.net/7a85hagm/

<table style="width: 80%; height: 200px; border-collapse: collapse; border-spacing: 0;" border="1" id='mapContent'>
  <tr>
    <td>
      <div id="map" style="width: 78%;height: 50%;position: absolute;border:1px solid red;">
        abc
      </div>
    </td>
  </tr>
</table>

Answer 1

你应该使用 position: relative在 <td> 上并设置 width的 <div>至 100% ;

你这样做的方式非常脆弱。另请注意，1% 宽度不对应于 1px 边框。我也推荐box-sizing: border-box;对于 <div>所以它的边界不与 <td> 重叠的边界。

您还应该从 <td> 中删除填充通过padding: 0px;