有时候需要固定上下导航栏中间部分可以滑动这样的需求
以下是实现的具体方法
<!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>