我有一个div C，它使用height设置了max-height。该div包含一个divD。
我希望包含的div D具有与包含的div C完全相同的高度（且不超过）。
如果我将height属性用于div C，例如here
使用height: 90%设置div C的高度
使用height: 100%设置div D的高度
然后，一切正常，并且div D的高度等于
div C的高度
如果我将max-height属性用于div C，例如here
使用max-height: 90%设置div C的高度
使用height: 100%设置div D的高度
那么，div D的高度不等于div C的高度（很多
较大，因为其中的内容很长）。在小提琴中，它看起来不错，但是如果您检查div D，您会发现它要大得多。
但是我需要使用max-height css属性，如何仅使用css将div D的高度设置为等于div C的高度？
<div id="container">
<div id="A">
<div id="B">
<div id="C">
<div id="D">
<div id="D1">D1</div>
<div id="D2">
D2 - very long content
</div>
</div>
</div>
</div>
</div>
</div>
谢谢！！！
最佳答案
事情无法按您预期的方式运行的原因仅是因为max-height并未设置包含div的高度。顾名思义，它所做的就是为div的高度设置一个最大限制。
这是来自W3 CSS2 specification的引用，内容涉及如何计算块元素上的百分比高度。这可能有助于阐明问题：
相对于生成的盒子的包含块的高度计算百分比。如果未明确指定包含块的高度（即，它取决于内容的高度），并且该元素的位置不是绝对的，则该值将计算为“自动”。
在您的情况下，包含div的高度不是显式设置的，而是取决于内容的高度，因为当您将包含div的max-height设置为90%时，并且没有足够的内容将包含div拉伸为自身包含元素的高度，则包含div的高度将小于其自身包含元素的高度的90％。
试图解释我相信正在发生的事情
浏览器以初始高度90%渲染包含的div，由于没有内容，因此将计算为auto。随之而来的是要以其包含块的高度的0px高度呈现的所包含的div，浏览器意识到这很荒谬，因为100%的100%恰好又是0px。因此，它决定将所包含的div的高度设置为0px。如果不这样做，则包含的div将永远不可见，因为无论接下来发生什么，包含块的高度auto的100%始终将为0px。请记住，浏览器试图遵循上面引用的规则的这一部分：
相对于生成的框的包含块的高度计算百分比
现在只有更多的div会在包含的div中呈现。在做出之前的决定时，浏览器尚不了解这些div，因此晚了一些。如果浏览器在渲染了这些div之后又要回溯并进行自我修复，那将实际上违反了上面引用的规则部分。因为会间接*根据其内容的高度设置所包含的div的百分比高度。
因此，W3规范的人们提出了规则的第二部分。如果未设置其包含的div的高度（因此默认为0px），则浏览器可以决定将包含的div的高度设置为auto。
因此，您可以说那些div较晚的单元很幸运，因为浏览器已经采取了先发制人的做法，并且将包含的div的高度设置为auto以适应后来者，因此浏览器已经采取了一些预防措施，并且仍然能够呈现这些div。
*通过根据包含的div内容的高度计算包含的div的高度，然后将包含的div的百分比高度基于此值。
结论
浏览器只是坚持使用W3规范，这是一件好事。您的第一个小提琴起作用是因为浏览器制造商遵守该规范，而第二个小提琴由于完全相同的原因而无法工作。
解决方案
您只能通过确保要使浏览器窗口的高度为auto的div是其高度设置为浏览器窗口的90%的div的直接后代来解决问题。如果不是绝对放置祖先div，则div的每个祖先，一直到100% document元素，都必须自己设置html的高度。
上面的行是正确的，除非遇到一个绝对放置的祖先（这将使它脱离常规文档流），而没有此祖先本身具有设置了100%的祖先（这将强制其绝对定位为根据其相对定位父对象的位置而不是浏览器窗口的高度），并且此祖先设置为浏览器窗口的高度（使用position: relative）。在这种情况下，DOM树的运行将在绝对定位的祖先处停止。
关于html - 使用max-height =>设置的div高度，使包含的div使用CSS达到全高，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16453313/