.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>
&#13;
这里我在容器上使用了高度和calc函数。问题是,儿童div没有100%的父母身高。为什么会这样?
答案 0 :(得分:2)
需要使用calc()
函数添加空格:
.container {
width: 400px;
height: calc(100% - 100px);
border: 1px solid black;
}
然后,删除html,body padding:
.html, body {
padding: 0;
}
In this fiddle I've made with the code above,容器是父级的100%高度。
In the fiddle @Frits provided,他更正了calc()
问题。