爲什麼父級具有計算函數的高度時子元素的百分比高度不起作用？

Question

.html, body { 
 
    height: 500px; 
 
    border: 1px dotted blue; 
 
    padding: 10px; 
 
} 
 
.container { 
 
    width: 400px; 
 
    height: calc(100%-100px); 
 
    border: 1px solid black; 
 
} 
 
.child { 
 
    border: 1px solid red; 
 
    height: 100%; 
 
}

<div class="container"> 
 
    <div class="child"></div> 
 
</div>

在這裏，我已經使用高度與容器計算功能。問題是孩子div沒有達到其父母的100％身高。爲什麼這樣？

Answer 1

需要與calc()功能添加空格：

.container { 
    width: 400px; 
    height: calc(100% - 100px); 
    border: 1px solid black; 
} 

然後，取出的HTML，主體填充：

.html, body { 
    padding: 0; 
} 

In this fiddle I've made with the code above，容器是父的全100％的高度。

In the fiddle @Frits provided，他更正了calc()問題。