div height设置为max-height => make包含div使用css获取全高

Question

我有一个divç height设置使用max-height.这个div包含一个div D.

我希望包含的div D具有与包含div C完全相同的高度(而不是更多).

如果我使用heightdiv C 的属性,就像这里一样

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

如果我使用max-heightdiv C 的属性,就像这里一样

• div C的高度是使用设置的 max-height: 90%
• div D的高度使用设置 height: 100%
• 然后,div D的高度不等于div C的高度(由于其内部的内容非常长,因此更大).在小提琴中,它看起来不错,但如果你检查div D,你会发现它更大.

但我需要使用max-heightcss属性,如何设置div D的高度等于div C的高度只用css？

<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

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

以下是关于如何计算块元素的百分比高度的W3 CSS2规范的引用.这可能有助于揭示这个问题:

百分比是根据生成的框的包含块的高度计算的.如果未明确指定包含块的高度(即,它取决于内容高度),并且此元素未绝对定位,则该值将计算为"auto".

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

试图解释我认为发生了什么

浏览器呈现包含div的初始高度为auto,因为它还0px没有内容.除了来自哪个想与高度呈现的包含DIV 100%其包含块的高度,浏览器意识到这是荒谬的,因为100%的0px正好是0px一次.所以它决定将所包含的div的高度设置为auto.如果它没有这样做,那么包含的div将永远不可见,因为无论接下来发生什么,100%包含块的高度0px总是如此0px.请记住,浏览器正试图坚持上面引用的规则的这一部分:

百分比是根据生成的框的包含块的高度计算的

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

因此,W3规范的人们已经提出了规则的第二部分.这使得浏览器决定将包含div的高度设置为auto如果未设置其包含div的高度(因此默认为auto).

所以你可以说那些已故的div很幸运,浏览器采取了一些预防措施,并且仍然可以渲染这些div,因为它已经先发制人并且已经设置了包含div的高度auto以适应后来者.

_{*通过根据所包含div的内容高度计算包含div的高度,然后根据该值确定所包含div的百分比高度.}

结论

浏览器只是坚持W3规范,这是一件好事.你的第一个小提琴是有效的,因为浏览器制造商正在遵守规范,而你的第二小提琴不能用于完全相同的原因.

解决方案

您只能通过确保您希望拥有90%浏览器窗口高度的div是div的直接后代来解决您的问题,该div 的高度设置为100%浏览器窗口的高度.如果祖先div没有绝对放置,div的每个祖先,一直到html文档元素,也必须具有100%自己设置的高度.

上面的线是真实的,除非如果遇到一个祖先这是绝对放置(这将取出的常规文档流),而不必与一个祖先此祖先本身position: relative集(这将迫使其绝对定位可以基于其相对定位的父级的位置而不是浏览器窗口的高度),并且此祖先设置为浏览器窗口的高度(使用top: 0px; bottom: 0px;).在这种情况下,运行DOM树将停在绝对定位的祖先.