CSS子级不会继承高度。 VH 中的父身高。引导程序 3

Posted 2023-03-06

【中文标题】CSS子级不会继承高度。 VH 中的父身高。引导程序 3

【英文标题】：CSS child won't inherit height. Parent height in VH. Bootstrap 3

【发布时间】：2017-01-09 08:47:24

【问题描述】：

这里提出的第一个问题。我环顾四周并用谷歌搜索，但找不到解决问题的方法。

我有一个父级（引导行）占用计算高度，100vh - 140px。这很好用，但我不能让它的孩子占据它的父母的百分比。我里面有3个div。我希望一个占父母身高的 100%，另外两个占 40% 和 60%。

我读过“身高：继承；”应该工作，但它没有。为了兼容性，我还添加了带有所需百分比的 max-height。

我尝试过 Chrome、Firefox 和 Safari。

CSS 代码：

// Parent
#start-page 
    min-height: calc(100vh - 140px);

// Children
#init-square-1 
    height: inherit;
    max-height: 100%;

#init-square-2 
    height: inherit;
    max-height: 40%;

#init-square-3 
    height: inherit;
    max-height: 60%;

html:
    <section id="start-page" class="row">
        <div id="init-square-1" class="col-xs-12 col-sm-6"></div>
        <div id="init-square-2" class="col-xs-12 col-sm-6"></div>
        <div id="init-square-3" class="col-xs-12 col-sm-6"></div>
    </section>

【问题讨论】：

inherit 不能工作，如果没有任何东西可以继承（并且没有，因为父元素没有明确的高度设置。）你没有指定高度在这里，但只有最小高度，可能是一个额外的问题。我真的建议你研究一下 flexbox，它应该更适合实现你想要的。

感谢您的快速回复和解释！如果由我决定，我肯定会改用 Flexbox，但我必须在这个项目上坚持使用 Bootstrap。

【参考方案1】：

height: inherit; 并不意味着继承父元素的高度，而是继承父配置的高度，所以在这种情况下是从 div 继承的。 div元素的默认高度是0，所以继承了0。

我不确定您要设置的高度，但如果必须与#start-page 的高度相同，则将高度设置为 100%

height:100%;

还可能需要（不确定）给外部容器一个位置：相对

#start-page 
    min-height: calc(100vh - 140px);
    position:relative;

【参考方案2】：

事实证明，我需要做的就是将父母的身高改为刚刚

height: calc(100vh - 140px);

代替：

min-height: calc(100vh - 140px);

所以，从高度中删除“min”就可以了。

感谢您的帮助！