如上圖的樣式，制作過程。

HTML

<div className="pageWrap"><MainHeader /><main className="main"></main><MainFooter /></div>

CSS

.pageWrap{display: flex;min-height: 100vh;flex-direction: column; } .main{flex:1; }

總結

以上是生活随笔為你收集整理的如何设置顶部和底部固定，中间填满的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。