如何让盒子占满剩余高度

如何让盒子占满剩余高度???

<div class="detail">
    <div class="header">
    </div>
    <div class="aside-main">
    </div>
</div>

• 如上方html所示 我们要让 <div class="aside-main">占满剩余高度 但是我们有以下问题要解决:

  1. 由于我们这个页面是路由页面在中,然而又设置了min-height导致子元素无法继承到父元素height;

• 所以我们这样来写:

  1. 为<app-main>添加相对定位

  2. 为<div class="detail">添加绝对定位并且添加height: 100%

  3. 将<div class="detail">拉伸为100%宽度(否则可能会变形)

  4. 为<div class="detail">添加flex布局并且设置flex-direction: column;

  5. 拉伸<div class="aside-main">添加flex:1

 .detail {
    display: flex;
    flex-direction: column;
    position: absolute;//父元素添加相对定位子元素添加绝对定位后就能继承高度了 
    height: 100%;
    right: 0;//拉伸<div class="aside-main">    
    left: 0;//拉伸<div class="aside-main">  
    .header {
        height: 50px
    }
    .aside-main {
     flex: 1;
    }
}