粘性底部布局
作者：互联网
<!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>
*{
margin: 0;
}
.main{
min-height: 100vh;
display: flex;
flex-direction: column;
}
.main .header{ height: 100px; background-color: pink; }
.main .content{ flex-grow: 1; }
.main .footer{ height: 100px; background-color: skyblue; } </style> </head> <body> <div class="main"> <div class="header">12</div> <div class="content"> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> </div> <div class="footer">22</div> </div> </body> </html>
.main .header{ height: 100px; background-color: pink; }
.main .content{ flex-grow: 1; }
.main .footer{ height: 100px; background-color: skyblue; } </style> </head> <body> <div class="main"> <div class="header">12</div> <div class="content"> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p>
<p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> <p>测试内容</p> </div> <div class="footer">22</div> </div> </body> </html>
标签：flex,color,布局,粘性,height,内容,底部,测试,main 来源： https://www.cnblogs.com/eric-share/p/15364481.html