Html 如何将 div 缩放到另一个元素内的 100% 高度和宽度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/572783/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I scale a div to 100% height and width inside of another element
提问by mzehrer
How can I scale a div to 100% height and width inside of another element? In my case a sourrounding td. Since I'm a plugin I can not control the other HTML on the page. Here is my HTML:
如何将 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>
So, the Cell 2 div should be maximized. Is there a cross browser way to do this? Why is this so complicated?
因此，应该最大化 Cell 2 div。有没有跨浏览器的方式来做到这一点？为什么这么复杂？
回答by roman m
Look at this stack overflow questionas well ... after reviewing the top rated answerin that question, it looks like you have to set the height of the container to 100% and "min-height, height" of a child element to 100%.
看看这个堆栈溢出问题......在查看了该问题中评分最高的答案后，您似乎必须将容器的高度设置为 100%，并将子元素的“最小高度，高度”设置为 100 %。
Go to this websitefor more info - the HTML below is stripped-down version of the website
转到此网站了解更多信息 - 下面的 HTML 是该网站的精简版
<div style="height:100%;">
<div style="min-height:100%; height:100%; background-color:red;">
put your content here
</div>
</div>
回答by jeroen
Using javascript / jquery you can easily get the height of the parent element and resize your div accordingly.
使用 javascript/jquery，您可以轻松获取父元素的高度并相应地调整 div 的大小。
However, as the div is located in a table cell, the width is not fixed as the cell would expand and contract according to the contents of the other cells in the table. So there really is no correct width, the cell will adapt itself according to the contents of all cells.
但是，由于 div 位于表格单元格中，因此宽度不是固定的，因为单元格会根据表格中其他单元格的内容进行扩展和收缩。所以确实没有正确的宽度，单元格会根据所有单元格的内容自行调整。
By the way, your height problem would be easily solved setting it to 400px, but I guess the shown table structure is just an example (1 row, 400px height...).
顺便说一下，您的高度问题可以轻松解决，将其设置为 400 像素，但我想显示的表格结构只是一个示例（1 行，400 像素高度...）。
回答by Sam152
Why bothing having a div within a div if its going to be 100% of the height and the width? Is there no other way of just using the containing div for your purpose?
如果 div 是高度和宽度的 100%，为什么还要在 div 中放置 div？有没有其他方法可以仅使用包含的 div 来达到您的目的？
It probably isnt working because height fails unless the containg element has some definite height applied to it.
它可能不起作用，因为高度失败，除非包含元素应用了一些确定的高度。
