简体   繁体   English

Div是否未将其父级的完整高度与`vh`一起定位?

[英]Div is not taking the full height of its parent positioned with `vh` unite?

I must say that this isn't kind of a big problem, but it is weird though! 我必须说这不是什么大问题,但这很奇怪!

I have a section element with min-height: 50vh; 我有一个min-height: 50vh;section元素min-height: 50vh; css . css And inside it a div with some contents. 并在其中包含一些内容的div。 Even after setting height: 100%; 整定height: 100%; to the div , it still doesn't take the full height of its parent; 对于div ,它仍未达到父级的全部高度; the section . section And that is what I don't see why!?! 那就是我不明白的原因!?!

One solution is to give a relative position to the section and absolute to the div with top, bottom, left, and right set to 0 . 一种解决方案是在top, bottom, left, and right设置为0 top, bottom, left, and right给该section提供相对位置,并给div绝对位置。 But I'm super anxious to know why did that behaviour happen?! 但是我非常想知道为什么会发生这种行为?

Thanks! 谢谢!

A block display element (which a div is) will take up the full width of its parent, but it will not take the full height of it's parent. 块显示元素(div为div)将占据其父级的整个宽度,但不会占据其父级的整个高度。 By default, the height of a block display element is defined by the height of its contents. 默认情况下,块显示元素的高度由其内容的高度定义。

If you do want your div to take up the full height relative to the parent container, you can explicitly set it's height in CSS. 如果您确实希望div占据相对于父容器的整个高度,则可以在CSS中显式设置其高度。 If you set the height to 100% then it will in fact take the full height of it's parent, regardless it's children. 如果将高度设置为100%,则实际上它会采用其父级的完整高度,而不管它是子级。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM