Question

如何将div缩放到另一个元素内的100％高度和宽度？在我的情况下，周围的td。由于我是一个插件，我无法控制页面上的其他HTML。这是我的HTML：

<body style="height:100%;">
  <table width="600px" height="400px" border="1">
    <tr>
      <td style="background-color:silver;">Cell 1</td>

      <td style="background-color:silver;">
    <div style="height:100%; background-color:yellow;">
      <div style="min-height:100%; height:100%; background-color:red;">
        Cell 2
      </div>
    </div>
      </td>
    </tr>
  </table>
</body>

因此，Cell 2 div应该最大化。有没有跨浏览器的方式来做到这一点？为什么这么复杂？

Answer 1

同样查看this stack overflow question ...在查看该问题中的the top rated answer之后，看起来您必须将容器的高度设置为100％，并将“min-height，height”设置为一个100％的子元素。

转到this website了解更多信息 - 以下HTML是网站的精简版

<div style="height:100%;">
  <div style="min-height:100%; height:100%; background-color:red;">  
    put your content here 
  </div> 
</div>

Answer 2

使用javascript / jquery，您可以轻松获取父元素的高度，并相应地调整div的大小。

但是，由于div位于表格单元格中，因此宽度不固定，因为单元格将根据表格中其他单元格的内容进行扩展和收缩。因此确实没有正确的宽度，细胞将根据所有细胞的内容进行自我调整。

顺便说一句，你的高度问题很容易解决，将它设置为400px，但我想显示的表结构只是一个例子（1行，400px高度......）。

Answer 3

为什么在div中有一个div，如果它的高度和宽度是100％？为了您的目的，没有其他方法只使用包含div吗？

它可能不起作用，因为高度失败，除非含有元素有一定的高度。

如何将div缩放到另一个元素内的100％高度和宽度

3 个答案: