Question

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

我希望包含的div D与包含div C具有完全相同的高度（而不是更多）。

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

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

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

使用 max-height: 90%
使用height: 100%
然后，div D的高度不等于div C的高度（很多因为里面的内容很长所以更大）。在小提琴中，它看起来不错，但如果你检查div D，你会发现它更大。

但是我需要使用max-height css属性，如何设置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 specification关于如何计算块元素的百分比高度的引用。这可能有助于揭示这个问题：

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

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

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

浏览器呈现包含div的初始高度为auto，由于还没有内容，因此计算为0px。随着包含的div想要以其包含块的高度100%的高度进行渲染，浏览器意识到这是荒谬的，因为100%的{{1}}正是{ {1}}再次。因此，它决定将包含的div的高度设置为0px。如果它没有这样做，那么包含的div将永远不可见，因为无论接下来发生什么，包含块的0px高度的auto总是会出现是100%。请记住，浏览器正试图坚持上面引用的规则的这一部分：

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

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

因此，W3规范的人们提出了规则的第二部分。如果没有设置包含div的高度（默认为0px），浏览器决定将包含div的高度设置为0px。

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

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

总结

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

解决方案

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

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

Answer 2

因为D在C里面不会只是说

#D {height: 100%;}

工作，因为这会告诉它占据其内部的100％？

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

div高度设置为max-height =＆gt;使用css使包含的div占据全高

2 个答案:

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

总结

解决方案