父容器高度不定,子容器填滿父容器剩餘高度

1. 實現代碼

// scss

// 最外層父容器
.express-detail {  
    display: flex;
    flex-direction: row;
}

// 中間層
.part-two {
    display: flex;
    justify-content: stretch;  // 使充滿父容器高度
    position: relative;
}

// 最內層子容器
.part-line {
    position: absolute;
    top: 25px;  // 使填滿父容器剩餘高度
    bottom: 0;  // 使填滿父容器剩餘高度
    width: 1px;
    background: #dddddd;
}

2. 需求分析

(1)目前內容如圖:

clipboard.png

(2)需求是實現這樣:

clipboard.png

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章