jensonliu 2019-06-29 11:40 采纳率: 0%
浏览 1226

父元素使用height:auto，子元素1固定高度，另一个子元素2使用height:100%,为什么子元素2的高度为0？

如题

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，感到费解，求高手指教。

  • 写回答

2条回答 默认 最新

  • 外号蓝大胖 2019-07-01 11:25
    关注

    你子元素高度设置百分比的话永远是看父元素的高度，不是看兄弟元素的高度，css也许不能获取到父元素的dom属性（个人理解）

    评论

报告相同问题？