使用 max-height 设置的 div 高度 => 使用 css 使包含的 div 采用全高

Question

我有一个 div C，其中 height 是使用 max-height 设置的。这个 div 包含一个 div D。

我希望包含的 div D 具有与包含的 div C 完全相同的高度（并且不超过）。

如果我对 div C 使用 height 属性，例如 here

• div C 的高度是使用 height: 90% 设置的
• div D的高度使用height: 100%设置
• 然后，一切正常，div D 的高度等于 div C的高度

如果我对 div C 使用 max-height 属性，例如 here

• div C 的高度使用 max-height: 90%
设置
• div D的高度使用height: 100%设置
• 那么，div D 的高度不等于 div C 的高度（很多 更大，因为里面的内容很长）。在小提琴中，它看起来不错，但是如果您检查 div D，您会发现它要大得多。

但我需要使用max-height css 属性，我怎样才能将 div D 的高度设置为仅使用 css 的 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>

谢谢！！！

Answer 1

这是因为 D 在 C 的内部不会只是说

#D {height: 100%;}

工作，因为这会告诉它占用它所在的 div 的 100%？

另外，这可能有助于http://css-tricks.com/the-css-box-model/

Answer 2

事情没有按你预期的方式工作的原因仅仅是因为max-height 没有设置包含 div 的高度。顾名思义，它所做的就是为 div 的高度设置一个最大限制。

这是W3 CSS2 specification 中关于如何计算块元素百分比高度的引述。这可能有助于阐明这个问题：

百分比是根据生成框的包含块的高度计算的。如果包含块的高度没有明确指定（即，它取决于内容高度），并且该元素不是绝对定位的，则该值计算为 'auto'。

在您的情况下，包含 div 的高度没有明确设置并且取决于内容高度，因为当您将包含 div 的 max-height 设置为 90% 时，没有足够的内容来拉伸包含 div到90%自身包含元素的高度，包含div的高度将小于自身包含元素高度的90%。

试图解释我认为正在发生的事情

浏览器以auto 的初始高度呈现包含的div，它计算为0px，因为还没有内容。随之而来的是包含的 div，它想要以其包含块的高度的高度为 100% 呈现，浏览器意识到这很荒谬，因为 0px 的 100% 又恰好是 0px。所以它决定将包含的 div 的高度设置为auto。如果不这样做，那么包含的 div 将永远不可见，因为无论接下来发生什么，包含块的高度为 0px 的 100% 始终是 @987654337 @。请记住，浏览器正试图遵守上面引用的这部分规则：

百分比是相对于生成框的包含块的高度计算的

现在才出现了更多的 div，它们希望在包含的 div 中呈现。在做出之前的决定的那一刻，浏览器还不知道这些 div，他们来晚了。如果浏览器在渲染了这些 div 之后要回溯并自行修复，那么它实际上会破坏上面引用的规则的一部分。因为它会间接^*根据其内容的高度设置包含的div的百分比高度。

由于这个 W3 规范，人们提出了规则的第二部分。如果未设置其包含 div 的高度（因此默认为 auto），这让浏览器决定将包含的 div 的高度设置为 auto。

所以你可以说那些迟到的 div 是幸运的，因为浏览器已经采取了一些预防措施并且仍然能够呈现这些 div，因为它已经抢先并将包含的 div 的高度设置为auto 以适应迟到者。

_{*通过根据包含的div内容的高度计算包含的div的高度，然后根据这个值计算包含的div的高度百分比。}

总结

浏览器只是坚持 W3 规范，这是一件好事。您的第一个小提琴奏效是因为浏览器制造商遵守规范，而您的第二个小提琴出于完全相同的原因无法奏效。

解决办法

您只能通过确保您希望浏览器窗口的高度为 90% 的 div 是高度设置为浏览器窗口的 100% 的 div 的直接后代来解决您的问题.如果祖先 div 不是绝对放置的，则 div 的每个祖先，一直到 html 文档元素，也必须在其自身上设置 100% 的高度。

上面的行是真的，除了如果遇到一个绝对放置的祖先（这会将它从常规文档流中取出），而这个祖先本身没有一个带有position: relative的祖先set（这将强制它的绝对定位基于其相对定位的父级的位置而不是浏览器窗口的高度），并且这个祖先被设置为浏览器窗口的高度（使用top: 0px; bottom: 0px;）。在这种情况下，DOM 树的向上运行将在绝对定位的祖先处停止。