如题
html:
<body>
<div class="app">
<div class="box"></div>
<div class="box2"></div>
</div>
</body>
<style type="text/css">
html,body{
width: 100%;
height: auto;
margin:0;
padding: 0;
}
.app{
height: 100%;
}
.box{
width: 100%;
height: 400px;
background-color: red;
}
.box2{
width: 100%;
/*这里的height无效*/
height: 100%;
background-color: blue;
}
</style>
本意是想让app的高度被撑开为400px,从而使得box2中设置height: 100%,使box2高度也变成400px,
但是box2高度却是0，感到费解，求高手指教。
你子元素高度设置百分比的话永远是看父元素的高度，不是看兄弟元素的高度，css也许不能获取到父元素的dom属性（个人理解）
当你让一个元素的高度设定为百分比高度时，是相对于父元素的高度根据百分比来计算高度。当没有给父元素设置高度（height）时
，浏览器会根据其子元素来确定父元素的高度，所以当无法根据获取父元素的高度，也就无法计算自己高度。
所以：直接给app的高度设为400px,box和box2都成400px了。
<style type="text/css">
html,body{
width: 100%;
height: auto;
margin:0;
padding: 0;
}
.app{
height: 400px;
}
.box{
width: 100%;
height: 100%;
background-color: red;
}
.box2{
width: 100%;
height: 100%;
background-color: blue;
}
</style>