<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; box-sizing: border-box; } .warp_height { min-height: 100vh; padding-bottom: 120px; /* padding-bottom: 120px这个等于底部的高度 */ box-sizing: border-box; } .header, .footer { height: 120px; background-color: red; width: 100%; } .header { position: sticky; top: 0; left: 0; } .content{ background-color: blue; height: 180px; } .footer { margin-top: -120px;/* margin-top: 120px这个等于底部的高度 */ } </style></head><body> <div class="warp_height"> <div class="header"> 头部,固定顶部，不会滚动 </div> <div class="content"> 都是内容 </div> </div> <div class="footer"> 底部,有余一屏固定在底部； <br> 超过一屏，置底 </div></body></html>