TIP
需求:
- 父元素高度固定
- 父元素内有若干高度不固定的子元素
- 其中一个子元素要求撑满其余位置且可以出现滚动条
标签1标签2标签3
潯陽江頭夜送客,楓葉荻花秋瑟瑟。
主人下馬客在船,舉酒欲飲無管絃。
醉不成歡慘將別,別時茫茫江浸月。
忽聞水上琵琶聲,主人忘歸客不發。
尋聲闇問彈者誰,琵琶聲停欲語遲。
移船相近邀相見,添酒回燈重開宴。
千呼萬喚始出來,猶抱琵琶半遮面。
轉軸撥絃三兩聲,未成曲調先有情。
絃絃掩抑聲聲思,似訴平生不得志。
低眉信手續續彈,說盡心中無限事。
輕攏慢撚抹復挑,初為霓裳後綠腰。
大絃嘈嘈如急雨,小絃切切如私語。
嘈嘈切切錯雜彈,大珠小珠落玉盤。
間關鶯語花底滑,幽咽泉流冰下難。
冰泉冷澀絃凝絕,凝絕不通聲暫歇。
別有幽愁闇恨生,此時無聲勝有聲。
銀瓶乍破水漿迸,鐵騎突出刀槍鳴。
曲終收撥當心畫,四絃一聲如裂帛。
東船西舫悄無言,唯見江心秋月白。
沉吟放撥插絃中,整頓衣裳起斂容。
自言本是京城女,家在蝦蟆陵下住。
十三學得琵琶成,名屬教坊第一部。
曲罷常教善才服,妝成每被秋娘妒。
五陵年少爭纏頭,一曲紅綃不知數。
鈿頭銀篦擊節碎,血色羅裙翻酒污。
今年歡笑復明年,秋月春風等閑度。
弟走從軍阿姨死,暮去朝來顏色故。
門前冷落車馬稀,老大嫁作商人婦。
商人重利輕別離,前月浮梁買茶去。
去來江口守空船,繞船月明江水寒。
夜深忽夢少年事,夢啼妝淚紅闌干。
我聞琵琶已歎息,又聞此語重唧唧。
同是天涯淪落人,相逢何必曾相識。
我從去年辭帝京,謫居臥病潯陽城。
潯陽地僻無音樂,終歲不聞絲竹聲。
住近湓江地低溼,黃蘆苦竹繞宅生。
其間旦暮聞何物,杜鵑啼血猿哀鳴。
春江花朝秋月夜,往往取酒還獨傾。
豈無山歌與村笛,嘔啞嘲哳難為聽。
今夜聞君琵琶語,如聽仙樂耳暫明。
莫辭更坐彈一曲,為君翻作琵琶行。
感我此言良久立,卻坐促絃絃轉急。
淒淒不似向前聲,滿座重聞皆掩泣。
座中泣下誰最多?江州司馬青衫濕。
主人下馬客在船,舉酒欲飲無管絃。
醉不成歡慘將別,別時茫茫江浸月。
忽聞水上琵琶聲,主人忘歸客不發。
尋聲闇問彈者誰,琵琶聲停欲語遲。
移船相近邀相見,添酒回燈重開宴。
千呼萬喚始出來,猶抱琵琶半遮面。
轉軸撥絃三兩聲,未成曲調先有情。
絃絃掩抑聲聲思,似訴平生不得志。
低眉信手續續彈,說盡心中無限事。
輕攏慢撚抹復挑,初為霓裳後綠腰。
大絃嘈嘈如急雨,小絃切切如私語。
嘈嘈切切錯雜彈,大珠小珠落玉盤。
間關鶯語花底滑,幽咽泉流冰下難。
冰泉冷澀絃凝絕,凝絕不通聲暫歇。
別有幽愁闇恨生,此時無聲勝有聲。
銀瓶乍破水漿迸,鐵騎突出刀槍鳴。
曲終收撥當心畫,四絃一聲如裂帛。
東船西舫悄無言,唯見江心秋月白。
沉吟放撥插絃中,整頓衣裳起斂容。
自言本是京城女,家在蝦蟆陵下住。
十三學得琵琶成,名屬教坊第一部。
曲罷常教善才服,妝成每被秋娘妒。
五陵年少爭纏頭,一曲紅綃不知數。
鈿頭銀篦擊節碎,血色羅裙翻酒污。
今年歡笑復明年,秋月春風等閑度。
弟走從軍阿姨死,暮去朝來顏色故。
門前冷落車馬稀,老大嫁作商人婦。
商人重利輕別離,前月浮梁買茶去。
去來江口守空船,繞船月明江水寒。
夜深忽夢少年事,夢啼妝淚紅闌干。
我聞琵琶已歎息,又聞此語重唧唧。
同是天涯淪落人,相逢何必曾相識。
我從去年辭帝京,謫居臥病潯陽城。
潯陽地僻無音樂,終歲不聞絲竹聲。
住近湓江地低溼,黃蘆苦竹繞宅生。
其間旦暮聞何物,杜鵑啼血猿哀鳴。
春江花朝秋月夜,往往取酒還獨傾。
豈無山歌與村笛,嘔啞嘲哳難為聽。
今夜聞君琵琶語,如聽仙樂耳暫明。
莫辭更坐彈一曲,為君翻作琵琶行。
感我此言良久立,卻坐促絃絃轉急。
淒淒不似向前聲,滿座重聞皆掩泣。
座中泣下誰最多?江州司馬青衫濕。
bottom item
<div class="parent">
<div class="top-child"></div>
<div class="auto-height">
<div class="auto-height__wrapper">
⋅⋅⋅
</div>
</div>
<div class="bottom-child"></div>
</div>
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
& > * {
flex-shrink: 0;
width: 100%;
}
.auto-height {
flex-grow: 1;
position: relative;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
.auto-height__wrapper {
width: 100%;
height: 100%;
overflow: auto;
position: absolute;
left: 0;
top: 0;
}
}
}
← 垂直居中 消除图片间隙 & 图文居中 →