如何设置元素相对于其祖父母元素的高度?

时间:2018-11-14 03:10:34

标签: html css

<body> 
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>  
</body>

如何设置“孩子”相对于身体的高度,同时保持“父母”占据孩子的整个身高?

1 个答案:

答案 0 :(得分:-1)

如果body为视口高度的100%,则其高度也为100 vh(视口高度)单位。您可以使用这些元素来设置子元素:

body {
    height: 100%; /* could also be "100vh" for better clarity */
}
.child {
    height: 50vh; /* 50% of the height of the body and viewport
}

然后,通常,父元素将采用子元素的总高度。您可能不得不在一个或两个上都使用overflow属性,具体取决于它们的内容。