手機端如何使得頭部底部固定，中間不被遮住且展示完整資訊
阿新 • • 發佈：2018-11-08
這裡用的是flex
#app{
display: flex;
flex-direction: column;
}中間部門寫 flex:1; 所以，底部和頂部會被撐開，且固定。（這裡的中間部分我用的是h5新標籤，當然可以用div來寫）。
注：這裡面的px應當用rem轉換，這裡我並沒有寫，沒有介紹。寫手機端的時候，是一定要轉換的。這裡主要講的是，頭部和底部固定。
全部程式碼如下：
<!DOCTYPE html> <html> <head> <title>flex</title> <meta charset="utf-8"> <style type="text/css"> *{ padding: 0; margin: 0 } html, body, #app, #home { height: 100%; width: 100%; font-family: "microsoft yahei", 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif; } body, html { font-size: 31.25vw; background-color: #eee; } #app{ display: flex; flex-direction: column; } header{ height: 120px; background-color: blue; font-size: 42px; text-align: center; line-height: 120px; } article{ display: flex; flex: 1; overflow-y: auto; } article>div{ flex: 1 } article>div p{ font-size: 64px } footer{ display: flex; height: 160px; background-color: green; font-size: 42px; align-items: center; } footer>p{ flex: 1; text-align: center; } </style> </head> <body> <div id="app"> <header>頭部</header> <article> <div> <p>第一行</p> <p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p> <p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p><p>內容</p> <p>最後一行</p> </div> </article> <footer><p>底部導航</p></footer> </div> </body> </html>