Question

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

我有一个父（Bootstrap行）占用计算高度，100vh - 140px。这很有效，但我无法让它的孩子占据其父母的百分比。我里面有3个div。我想要一个人把100％的父母身高，另外两个40％和60％。

我已经读过“身高：继承;＆＃39;应该工作，但它没有。为了兼容性，我还添加了所需百分比的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>

Answer 1

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

height: calc(100vh - 140px);

而不是：

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

所以，从高处移除'min'就可以了。

感谢您的帮助！

Answer 2

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

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

height:100%;

也可能需要（不确定）给外部容器一个位置：relative

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

CSS孩子不会继承身高。父母身高在VH。 Bootstrap 3

2 个答案: