因为用position是脱离文档流的，所以在最上面嘛，
中间用overflow：auto就会出现滚动效果
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #ac-globalnav { position: absolute; margin: 0; left: 0; top: 0; width: 100%; min-width: 1024px; height: 88px; max-height: 100px; background: #333; background: rgba(0,0,0,0.8); font-size: 17px; user-select: none; } #web_button { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; width: 100%; min-width: 1024px; height: 44px; max-height: 100px; background: #333; background: rgba(0,0,0,0.8); font-size: 17px; user-select: none; line-height:44px; } li { display: inline; list-style:none; margin:0 35px 0 35px; color: #fff; line-height:58px; cursor:pointer; } li:hover{ color: red; <!--想换加入背景色的话， 可以使用background--> } ul {float:left; margin-left:18%;} .content{ position: fixed; left: 0; right: 0; padding: 0; margin: 0; top: 88px; bottom: 44px; overflow: auto; background: red; } </style> </head> <body> <!--top--> <div> <div id="ac-globalnav"> <ul> <li>首页</li> <li>自学教程</li> <li>指法表</li> <li>曲谱</li> <li>视频作品</li> <li>资料下载</li> <li>社区</li> <li>搜索</li> <li></li> </ul> </div> </div> <!--body--> <div class="content"> <div style="height: 2000px;"> <h3>adf</h3> <h3>adf</h3> <h3>adf</h3> <h3>adf</h3> <h3>adf</h3> <h3>adf</h3> <h3>adf</h3> </div> </div> <!--button--> <div> <div id = "web_button"> <center>所有权...</center> </div> </div> </body> </html>