有时候需要固定上下导航栏中间部分可以滑动这样的需求
以下是实现的具体方法
<!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> <div></div> <div> <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></div></div> </body></html>
由于中间部分是一个适应性的盒子，如何想达到有滚动条的效果必须要盒子内的内容撑开盒子!
有不足的地方可以指出。
