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

标签 html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 4 年前

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

如何设置“ child ”相对于 body 的高度,同时让“ parent ”占据 child 的全部高度?

最佳答案

如果 body 是视口(viewport)高度的 100%,它也是 100 vh(视口(viewport)高度)单位高。您可以使用它们来设置您的子元素:

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

通常,父元素将采用子元素的总高度。根据它们的内容,您可能不得不在其中一个或两个上摆弄 overflow 属性。

关于html - 如何设置元素相对于其祖父元素的高度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53292648/

上一篇:css - 格式化行标题的 Flexbox 问题

下一篇:javascript - 按 html 按钮时显示 iframe 不起作用 - javascript

相关文章:

php - 我确定这是一个快速修复,但它似乎不像这样工作

html - 无法在 Bootstrap 导航栏中使用伪类定位第一个链接

html - 设置属性 'text-overflow: ellipsis' 然后其兄弟元素的文本无法与其对齐

css - Vuetify CSS 布局问题

html - 列表溢出滚动

jquery - 多个滑动开关

javascript - 遍历dom,next,prev

html - CSS 中的独立属性选择器

javascript - jQuery:悬停和单击时在按钮上切换具有相同特性的类

css - JsPDF部分黑色