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

mze*_*rer 5 html css internet-explorer

如何将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>
Run Code Online (Sandbox Code Playgroud)

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

rom*_*n m 5

看看这个堆栈溢出问题 ......在查看该问题中最受欢迎的答案后,看起来你必须将容器的高度设置为100%,将子元素的"min-height,height"设置为100 %.

访问该网站了解更多信息 - 下面的HTML是该网站的精简版本

<div style="height:100%;">
  <div style="min-height:100%; height:100%; background-color:red;">  
    put your content here 
  </div> 
</div> 
Run Code Online (Sandbox Code Playgroud)

  • 这也让我感到惊讶 - 提供的链接解决了这个问题.在我的情况下还需要html和body的高度为100% (2认同)

Sam*_*152 1

如果 div 的高度和宽度都是 100%,为什么还要在 div 中再包含一个 div 呢?是否没有其他方法可以仅使用包含的 div 来达到您的目的?

它可能不起作用,因为高度失败,除非包含元素应用了一些明确的高度。