在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問(wèn)答/UI  HTML/ flex布局我設(shè)置height為100% 不生效

flex布局我設(shè)置height為100% 不生效

黃色區(qū)域?yàn)閐ataArea我在內(nèi)部設(shè)置menu的高度為100%，不生效？？
clipboard.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin:0;
            border:0;
            padding: 0;
        }
        html,body{
            height: 100%;
        }
        .content {
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }

        .content .selectArea {
            height: 40px;
            border-bottom: 1px solid #ccc;
            background: red;
        }

        .content .dataArea {
            flex-grow: 1;
            background: yellow;
            flex-direction: row;
        }

        .content .dataArea .menu {
            height: 20px;
            width: 140px;
            font-size: 30px;
            background: pink;
        }

        .content .dataArea .menu text {
            display: block;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }

        .content .dataArea .menuContent {
            flex-grow: 1;
            height: 100%;
            background: pink;
        }
    </style>
</head>
<body>
    <div class='content'>
        <div class='selectArea'>

        </div>
        <div class='dataArea'>
            <div class='menu'>
                <!-- <text wx:for="{{menu}}" wx:for-item='menuName' wx:key>{{menuName}}</text> -->
            </div>
            <div class='menuContent'>

            </div>
        </div>

    </div>
</body>
</html>
回答
編輯回答
詆毀你

.content .dataArea {

flex-grow: 1;
background: yellow;
flex-direction: row;
height: 100%;

}

2017年5月10日 05:46
編輯回答
空痕

父容器的高度呢？

2018年7月11日 12:06
編輯回答
選擇
.dataArea {
    postition: realative;
}
.menu {
    postition: absolute;
}

加個(gè)定位試試？

2017年2月3日 12:22