很抱歉，这是一个旧问题还是一个已知问题，但是我无法在线找到答案。如果我有代码
<style> html, body { height: 100%; width: 100%;} #div1 {height:50%; min-height:200px;background-color:red;} #div2 {height:100%; background-color:black;} </style> <body> <div id="div1"><div id="div2"></div></div> </body>
然后在Firefox中，黑色的内部div随着屏幕缩小而缩小，并在200px高度处停止。但是，在Webkit浏览器中，红色的外部div停止，但内部div继续缩小，就好像它在没有min- height属性的父div中一样。
是否有一个简单的修复程序可以使Webkit版本与Firefox渲染保持一致？min- height:inherit如果将一个作品放在内部div上，则在一个div内有多个div的情况下，min-height:inherit每个子div 都需要这样做。还有更优雅的解决方案吗？
min- height:inherit
min-height:inherit
是的，这是一个WebKit错误，错误26559。
height``%相对于包含块的指定height属性计算静态或相对定位元素上的in ，而不是考虑min-height和考虑max- height到所计算的高度。宽度不会发生相同的情况。
height``%
height
min-height
max- height
您可以从CSS 2.1中看出这是从哪里来的，它指出必须明确设置包含块的高度%才能正常工作。但是并没有明确说明“显式”是什么意思！浏览器认为这意味着height必须将属性设置为非自动值，这很公平，只是现在height还不够。其他浏览器允许min-height/ max-height影响要使用的高度，但不允许其表示“显式”。WebKit通过 仅 height用于计算而不是最小/最大来进一步发展（并且这绝对不是规范要求的）。
%
max-height
作为解决方法，您可以尝试不影响绝对定位。相对位置外部div，绝对位置内部left: 0; top: 0; width: 100%; height: 100%。
left: 0; top: 0; width: 100%; height: 100%
