我正在開(kāi)發(fā)一個(gè)包含以下標(biāo)記和樣式的布局（現(xiàn)場(chǎng)演示https://codepen.io/IljaDaderko/pen/MWwLgVr）這一切都運(yùn)行良好，我的頁(yè)眉和頁(yè)腳具有固定高度，內(nèi)容區(qū)域自動(dòng)擴(kuò)展以填充其余部分的空間。在內(nèi)容區(qū)域內(nèi)，我有一個(gè) div 填充其所有父空間并添加overflow-x: scroll. Content <br />我最初的假設(shè)是，如果我在其中添加一堆內(nèi)容，我仍然會(huì)看到頁(yè)腳并能夠向下滾動(dòng)，但它會(huì)不斷擴(kuò)大內(nèi)容區(qū)域（請(qǐng)參閱現(xiàn)場(chǎng)演示＃2 https://codepen.io/IljaDaderko/pen /MWwLgBQ）。是否可以將該頁(yè)腳保留在底部（而不將其固定），同時(shí)使內(nèi)容區(qū)域自動(dòng)擴(kuò)展并利用滾動(dòng)容器？保留滾動(dòng)容器的原因是它將成為我使用的框架中可重用的組件。CSS.container { width: 100vw; height: 100vh; background: pink; display: flex; flex-direction: column;}.header { background: magenta; height: 50px;}.content { flex-grow: 1;}.footer { background: lightgreen; height: 30px;}.scroll { height: 100%; width: 100%; overflow-x: scroll;}超文本標(biāo)記語(yǔ)言<div class="container"> <div class="header">Header</div> <div class="content"> <div class="scroll"> Content </div> </div> <div class="footer">Footer</div></div>
1 回答
慕容3067478
TA貢獻(xiàn)1773條經(jīng)驗(yàn) 獲得超3個(gè)贊
你做得很好，只需要稍微改變一下你的CSS。
進(jìn)行以下更改：
overflow從滾動(dòng)類(lèi)中刪除屬性添加
overflow: scroll到內(nèi)容類(lèi)
在代碼中：
.content {
flex-grow: 1;
overflow: scroll;
}
.scroll {
height: 100%;
width: 100%;
}
無(wú)論您向滾動(dòng) div 添加多少內(nèi)容，您現(xiàn)在都應(yīng)該獲得滾動(dòng)內(nèi)容。
- 1 回答
- 0 關(guān)注
- 188 瀏覽
添加回答
舉報(bào)
0/150
提交
取消