1、关于顶部/底端固定, 中间内容滚动的处理
不要使用calc(100vh - 300px)这种写法，因为calc里vh和px混写容易出问题，在有些手机里不会计算出具体的值
calc支持单单只是vh，也支持calc(50% - 100px), 但是calc(100vh - 300px)这种兼容性差。
可以考虑采用flex布局，如下：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 .outer { 8 margin: 0 auto; 9 width: 375px; 10 height: 100vh; 11 overflow: hidden; 12 display: flex; 13 flex-direction: column; 14 background: #abcdef; 15 } 16 17 .header { 18 height: 200px; 19 flex-shrink: 0; 20 background: orange; 21 } 22 23 .list { 24 flex: 1; 25 overflow: auto; 26 background: green; 27 } 28 29 .list-content { 30 margin: 0 auto; 31 width: 300px; 32 height: 1000px; 33 background: red; 34 } 35 </style> 36 </head> 37 <body> 38 <div class="outer"> 39 <div class="header"></div> 40 <div class="list"> 41 1111 42 <div class="list-content"></div> 43 22222 44 </div> 45 </div> 46 </body> 47 </html>
值得注意的是第19行给header加了个flex-shrink: 0, 因为flex-shrink默认为1，就有可能会出现header那个div被压缩的情况。