css sticky footer布局

1.flex方法

< 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>Documenttitle>

< style>

body{

display: flex;

flex-flow: column;

min-height: 100 vh;

overflow: auto;

}

.container{

flex: 1;//占据剩余空间

}

.close{

height: 100 px;

background: red;

}

style>

head>

< body>

< div class= "container">

< div class= "main">

< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhp>

div>

div>

< div class= "close" style= "font-size: 30px;">

x

div>

body>

html>

2.伪元素after

< 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>Documenttitle>

< style>

*{

margin: 0;

}

html, body{

height: 100 %;

}

.container{

min-height: 100 %;

margin-bottom: -100 px;//-100PX用来抵消after的100px

}

.container:after{

content: '';

display: block;

height: 100 px;//也可以设置1px撑开container的高度（如果要求不严格的话）

}

style>

head>

< body>

< div class= "container">

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

< p>hhhhhhhhhhhhhhhhhhhp>

div>

< div class= "close" style= "font-size: 30px;height:100px;background: red;">

x

div>

body>

html>