[英]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.