CSS子將不會繼承高度。 VH中的父母身高。引導3

第一個問題在這裏問。我查看了周圍和谷歌搜索，但我找不到解決我的問題。CSS子將不會繼承高度。 VH中的父母身高。引導3

我有一個父（Bootstrap行），佔用計算的高度，100vh - 140px。這工作很好，但我不能讓它的孩子佔據它的父母的百分比。我內部有3個div。我想要一個人把100％的父母身高，另外兩個40％和60％。

我讀過'height：inherit;'應該可以工作，但事實並非如此。爲了兼容性，我還添加了所需百分比的最大高度。

我試過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>

來源

2016-09-01 Kaffia

如果沒有任何東西需要繼承（並且沒有，因爲父元素沒有明確的高度集合）'inherit'不能工作。你沒有在這裏指定高度，但只有min - 高度，可能是一個額外的問題。我真的建議你看看flexbox，這應該更適合實現你想要的。 – CBroe

感謝您的快速響應和解釋！如果它取決於我，我肯定會使用Flexbox，但我必須堅持Bootstrap這個項目。 – Kaffia

height: inherit;並不意味着繼承父元素，但是從父配置的高度，所以在這種情況下，股利。 div元素的默認高度是0，所以0被繼承。

我不知道你想設置什麼高度，但如果必須是相同的高度#start-page，然後設置高度爲100％

height:100%;

可能也需要它（不知道），得到外容器的位置：相對

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

來源

2016-09-01 12:54:14

事實證明，所有我需要做的是改變家長的高度，只是

height: calc(100vh - 140px);

代替：

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

所以，從高處刪除 '分' 的伎倆。

感謝您的幫助！

來源

2016-09-01 13:13:39 Kaffia

CSS子將不會繼承高度。 VH中的父母身高。引導3

回答

相關問題