有時候需要固定上下導航欄中間部分可以滑動這樣的需求
以下是實現的具體方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>固定導航欄</title> </head> <style> html,body{ padding: 0; margin: 0; width: 100%; height: 100%; overflow-y: hidden; } .wrap{ display: flex; flex-direction: column; height: 100%; } .header-nav{ width: 100%; height: 60px; background: #000; } .content{ flex: 1; height: 2000px; background: #E0FFFF; overflow-y: scroll; } .content p{ margin: 100px; } .footer-nav{ width: 100%; height: 200px; background: #000; } </style> <body> <div class="wrap"> <div class="header-nav"></div> <div class="content"> <p>我是文字1</p> <p>我是文字2</p> <p>我是文字3</p> <p>我是文字4</p> <p>我是文字5</p> <p>我是文字6</p> <p>我是文字7</p> <p>我是文字8</p> <p>我是文字9</p> <p>我是文字10</p> <p>我是文字11</p> <p>我是文字12</p> <p>我是文字13</p> </div> <div class="footer-nav"></div> </div> </body> </html>
由於中間部分是一個適應性的盒子，如何想達到有滾動條的效果必須要盒子內的內容撐開盒子!
有不足的地方可以指出。