div height设置为max-height =>使包含div使用CSS充分的高度 [英] div height set with max-height => make contained div takes full height using css

问题描述

我有一个div C，它使用 max-height 来设置 height 。这个div包含一个div D。

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

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

• div C的高度是使用 height：90％


• 使用 height设置div D的高度：100％


• 然后，一切正常，div D的高度等于div b
  的高度b
  
ul>



如果我使用div C的 max-height 属性，如这里






• 设置div C的高度使用 max-height：90％


• div D的高度使用 height：100％


• 然后，div D的高度不等于th e C的高度（由于其中的内容非常长，因此很多b $ b更大）。在小提琴中，它看起来不错，但是如果你检查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  - 非常长的内容
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
  

谢谢!!!

解决方案

事情不按照您期望的方式工作的原因很简单，因为 max-height 不会设置包含div的高度。它所做的就是，正如其名称所示，设置div的高度的最大限制。



以下是 W3 CSS2规范，了解如何在块元素上计算百分比高度。这可能有助于澄清这个问题：






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




在你的情况下，包含div的高度没有明确设置，并且取决于内容高度，因为当你设置 max-height 的包含div到 90％，并且没有足够的内容可以将包含div的div扩展到 90％的包含元素的高度，包含div的高度将小于其自身包含元素的高度的90％。



尝试解释我相信的内容正在发生





浏览器渲染包含初始高度为 auto 的div，计算结果为 0px ，因为还没有内容。随之而来的是包含的div，它想要以其包含块的高度 100％来渲染，浏览器意识到这是荒谬的，因为<$ c $再次， 0px 的c> 100％完全是 0px 。因此，它决定将包含div的高度设置为 auto 。如果它没有这样做，那么包含的div将永远不可见，因为不管发生了什么， 100％的包含块 0px 的高度始终为 0px 。请记住，浏览器试图坚持上面引用的这部分规则：






百分比是根据生成的框的包含块




ONLY NOW 沿着一些更多div想要在包含DIV。在做出以前的决定时，浏览器还不知道这些div，他们晚了一点。如果浏览器在渲染这些div后回溯并修复自己，那么它将有效地打破上面引用的规则的一部分。因为它会间接 ^* 根据内容的高度设置包含div的百分比高度。



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



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





_{*通过计算高度根据所包含div的内容的高度，然后根据所包含的div的百分比高度对该值进行基础分析。 结论 / h3>}



浏览器只是坚持W3规范，这是件好事。你的第一个小提琴的工作原理是因为浏览器制造商遵守规范，而你的第二个小提琴并不是出于完全相同的原因。



解决方案





您只能通过确保您希望浏览器窗口的高度 90％的div为浏览器窗口的高度设置为 100％的div的直接后代。如果祖先div不是绝对放置的话，div的每一个祖先，一直到 html 文档元素，都必须具有<$ c $的高度c> 100％自己设置。 上面这行是真实的，除之外，如果遇到一个绝对放置的祖先（这会将其从常规文档流中拿出来） ，如果没有这个祖先本身的祖先< position：relative set（这将迫使它的绝对定位基于它相对定位的父亲的位置而不是浏览器窗口），并且这个祖先被设置为浏览器窗口的高度（使用 top：0px; bottom：0px; ）。在这种情况下，运行DOM树将停止在绝对定位的祖先。




I have a div C which height is set up using max-height. This div contains a div D.

I want the contained div D to have the exact same height (and not more) than the containing div C.

If I use the height property for div C, like here

• the height of the div C is set up using height: 90%
• the height of div D is set up using height: 100%
• Then, Everything works fine, and the height of div D equals the height of div C

If I use the max-height property for div C, like here

• the height of the div C is set up using max-height: 90%
• the height of div D is set up using height: 100%
• Then, the height of div D is not equals to the height of div C (a lot bigger since the content inside it is very long). In the fiddle, it looks good, but if you inspect div D, you will see it's a lot bigger.

But I need to use the max-height css property, how can I set up the height of div D to be equals to the one of div C only with 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>

Thanks!!!

解决方案

The reason why things do not work the way you expect is simply because max-height does not set the height of the containing div. All it does is, as its name implies, set a maximum limit to the height of the div.

Here's a quote from the W3 CSS2 specification on how the percentage heights are calculated on block elements. This might help to shed some light on the matter:

The percentage is calculated with respect to the height of the generated box's containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to 'auto'.

In your case the height of the containing div is not set explicitly and depends on content height, because when you set the max-height of the containing div to 90%, and there is not enough content to stretch the containing div to 90% of the height of its own containing element, the height of the containing div will be less than 90% of the height of its own containing element.

An attempt to explain what I believe is happening

The browser renders the containing div with an initial height of auto, which computes to 0px as there is no content yet. Along comes the contained div which wants to be rendered with a height of 100% of the height of its containing block, the browser realizes that this is ridiculous, as 100% of 0px is exactly 0px again. So it decides to set the height of the contained div to auto instead. If it didn't do so, then the contained div would never be visible, because no matter what happens next, 100% of the containing block's height of 0px is always going to be 0px. Remember that the browser is trying to stick to this part of the rule quoted above:

The percentage is calculated with respect to the height of the generated box's containing block

ONLY NOW along come some more div's which would like to be rendered inside the contained div. At the moment when the previous decisions were made, the browser didn't yet know about these div's, they're a bit late to the party. If the browser was then to backtrack and fix itself up after it had rendered those div's, it would effectively be breaking the part of the rule quoted above. As it would indirectly^* be setting the percentage height of the contained div based on the height of its contents.

Because of this the W3 specification people have come up with the second part of the rule. Which lets the browser decide to set the height of the contained div to auto if the height of its containing div is not set (and therefore defaults to auto).

So you could say that those late div's are lucky that the browser has taken some precautions and is still able to render those div's, as it has been preemptive and has set the height of the contained div to auto to accommodate for latecomers.

_{*by calculating the height of the containing div based on the height of the contents of the contained div, and then basing the percentage height of the contained div on this value.}

In conclusion

Browsers are just sticking to the W3 specification, which is a good thing. Your first fiddle works because the browser makers are adhering to the specification, and your second fiddle doesn't work for the exact same reason.

The solution

You can only fix your issue by making sure that the div which you want to have a height of 90% of the browser window is a direct descendant of a div which has its height set to 100% of the browser window. If the ancestor div is not absolutely placed, every ancestor of the div, all the way up to the html document element, would also have to have a height of 100% set on itself.

The line above is true, except if an ancestor is encountered which is absolutely placed (which would take it out of the regular document flow), without this ancestor itself having an ancestor with position: relative set (which would force its absolute positioning to be based on the position of its relatively positioned parent instead of on the height of the browser window), and this ancestor is set to be the height of the browser window (using top: 0px; bottom: 0px;). In that case the running up the DOM tree will stop at the absolutely positioned ancestor.

这篇关于div height设置为max-height =&gt;使包含div使用CSS充分的高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！