html结构
<body> <div class="content"> </div> <div class="footer"> </div> </body>
1. 负margin拉动
.content{ min-height: 100%; margin-bottom: -50px; } .footer{ height: 50px; }
或
.content{ min-height: 100vh; } .footer{ height: 50px; margin-top: -50px; }
2. calc 计算
.content{ min-height: calc(100vh - 50px); } .footer{ height: 50px; }
3. flex 自适应
body{ min-height: 100vh; display: flex; flex-direction: column; } .conent{ flex: 1; } .footer{ height: 50px; }
4. grid 自适应
body { min-height: 100vh; display: grid; grid: 1fr auto; } .footer{ grid-row: 2 / 3 }
5. 绝对定位
body{ height: 100%; } .content{ padding-bottom: 100px; } .footer{ height: 100px; position: absolute; bottom: 0; }