我正在開發一個包含以下標記和樣式的布局（現場演示https://codepen.io/IljaDaderko/pen/MWwLgVr）這一切都運行良好，我的頁眉和頁腳具有固定高度，內容區域自動擴展以填充其余部分的空間。在內容區域內，我有一個 div 填充其所有父空間并添加overflow-x: scroll. Content <br />我最初的假設是，如果我在其中添加一堆內容，我仍然會看到頁腳并能夠向下滾動，但它會不斷擴大內容區域（請參閱現場演示＃2 https://codepen.io/IljaDaderko/pen /MWwLgBQ）。是否可以將該頁腳保留在底部（而不將其固定），同時使內容區域自動擴展并利用滾動容器？保留滾動容器的原因是它將成為我使用的框架中可重用的組件。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;}超文本標記語言<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貢獻1773條經驗 獲得超3個贊
你做得很好，只需要稍微改變一下你的CSS。
進行以下更改：
overflow從滾動類中刪除屬性添加
overflow: scroll到內容類
在代碼中：
.content {
flex-grow: 1;
overflow: scroll;
}
.scroll {
height: 100%;
width: 100%;
}
無論您向滾動 div 添加多少內容，您現在都應該獲得滾動內容。
- 1 回答
- 0 關注
- 172 瀏覽
添加回答
舉報
0/150
提交
取消