```html

<div class="detail">

????<div class="header">

????</div>

????<div class="aside-main">

????</div>

</div>

```

如上方html所示 我們要讓aside-main占滿剩余高度?

但是我們有以下問題要解決:?

1. 由于我們這個(gè)頁面是路由頁面在<app-main/>中,然而<app-main/>又設(shè)置了min-height導(dǎo)致子元素?zé)o法繼承到父元素height;

所以我們這樣來寫:?

1. 為<app-main>添加相對(duì)定位

2. 為<div?class="detail">添加絕對(duì)定位并且添加height: 100%

3.將<div?class="detail">拉伸為100%寬度(否則可能會(huì)變形)

4. 為<div?class="detail">添加flex布局并且設(shè)置flex-direction: column;

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

```scss

?.detail {
????display: flex;
????flex-direction: column;
????position: absolute;//父元素添加相對(duì)定位子元素添加絕對(duì)定位后就能繼承高度了?

????height: 100%;
????right: 0;//拉伸<div?class="aside-main">? ??

????left: 0;//拉伸<div?class="aside-main">??

????.header {

????????height: 50px

????}

????.aside-main {
?????flex: 1;

????}

}

```