<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Sticky footer布局</title> <style> * { margin: 0; padding: 0; } html, body { height: 100%; } body>.wrap { min-height: 100%; } .content { /* padding-bottom 等于 footer 的高度 */ padding-bottom: 60px; background: #eee; } .footer { width: 100%; height: 60px; /* margin-top 为 footer 高度的负值 */ margin-top: -60px; background: red; } </style> </head> <body> <!-- 我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。 --> <div class="wrap"> <div class="content"> <h2>Sticky footer布局?</h2> <hr> <hr> <p>我们所见到的大部分网站页面，都会把一个页面分为头部区块、内容区块和页脚区块，当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布。当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部，这就是Sticky footer布局。</p> <hr> <p>无限增加内容。。。。</p> </div> </div> <div class="footer"> <p>这是页脚</p> </div> </body> </html>