flex布局我设置height为100% 不生效

黄色区域为dataArea我在内部设置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>
阅读 19.7k
3 个回答
.dataArea {
    postition: realative;
}
.menu {
    postition: absolute;
}

加个定位试试?

新手上路,请多包涵

.content .dataArea {

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

}

父容器的高度呢?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题