垂直导航高度如何最大适应父盒子

提问 未结 1 106
JH混子
JH混子 7天前
悬赏:20飞吻
版本:layui 2.5.2 浏览器:谷歌
<div class="layui-card">
<div class="layui-card-body">
<div class="layui-colla-item">
<ul class="layui-nav layui-nav-tree admin-nav-tree" lay-filter="userNav">
<li class="layui-nav-item">
<a href="javascript:;">基本资料</a>
<i class="layui-icon layui-icon-right"></i>
</li>
<li class="layui-nav-item">
<a href="javascript:;">修改密码</a>
<i class="layui-icon layui-icon-right"></i>
</li>
<li class="layui-nav-item"><a href="javascript:;">个人活动</a>
<i class="layui-icon layui-icon-right"></i>
</li>
</ul>
<div class="layui-tab-content">
<div class="layui-card-header" style="display: block">基本资料</div>
<div class="layui-card-body" style="height: 500px"></div>
</div>
</div>
</div>


如何让导航ul撑满父盒子layui-card-body,ul设置了左浮动
回帖
  • ul 不要设置浮动,用flex布局,举个例
    <div class="baba">
    <ul class="son"></ul>
    <div class="daughter"></div>
    </div>

    <style>
    .baba{
    width: 100%;
    height:100%;//假设baba能有一个确定的高度。
    display: flex;
    flex-flow: row nowrap;
    align-items: strench;
    }
    .son{
    flex: 0 0 200px; //让儿子占200px宽
    }
    .daughter{
    flex: auto; //剩下的都给女儿
    }
    </style>
    0 回复