如何让盒子占满剩余高度???
2023-03-25 18:26 作者:ancientElement | 我要投稿
```html
<div class="detail">
<div class="header">
</div>
<div class="aside-main">
</div>
</div>
```
如上方html所示 我们要让aside-main占满剩余高度
但是我们有以下问题要解决:
1. 由于我们这个页面是路由页面在<app-main/>中,然而<app-main/>又设置了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
```scss
.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;
}
}
```