0

我有一个 div C，它height是使用max-height. 这个 div 包含一个 div D。

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

如果我将height属性用于 div C，就像这里

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

如果我将max-height属性用于 div C，就像这里

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

但是我需要使用max-heightcss属性，我怎样才能将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>

谢谢！！！

4

2 回答 2

6

事情没有按您期望的方式工作的原因仅仅是因为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 规范的人们提出了规则的第二部分。auto如果未设置其包含 div 的高度（因此默认为auto），浏览器可以决定将包含的 div的高度设置为 。

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

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

综上所述

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

解决方案

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

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

于 2013-05-09T23:22:13.573 回答
0

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

#D {height: 100%;}

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

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

于 2013-05-09T04:32:05.713 回答