验证中...
Languages: HTML
Categories: CSS 技巧
Latest update 2019-04-30 11:50
CSS-Sticky-Footer
Raw Copy
```
/*方法一,内容wrapper负margin*/
<div class="wrapper1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="push"></div>
</div>
<div class="footer">这是脚部,固定在最底下</div>
.wrapper1 {
min-height: 100%;
margin-bottom: -50px;
}
.wrapper1 .push,
.footer {
height: 50px;
}
.footer {
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法2-底总负margin*/
<div class="wrapper2">
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="push"></div>
</div>
<div class="footer2">这是脚部2,固定在最底下</div>
.wrapper2{
min-height: 100%;
}
.wrapper2 .push,.wrapper2 .footer{
height: 50px;
}
.footer2{
margin-top: -50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法三:弹性布局*/
<div class="flex">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>3</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="footer3">这是脚部3,固定在最底下</div>
</div>
.flex{
min-height: 100%;
display: flex;
flex-direction: column;
}
.flex .content{
flex:1;
width: 100%;
}
.flex .footer3{
flex:50px 0 0;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法四:absolute定位*/
<div class="absolute">
<div class="content">
<ul >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="footer4">这是脚部4,固定在最底下</div>
</div>
.absolute{
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.absolute .footer4{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法五:calc*/
<div class="calc">
<div class="content">
<ul >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="footer5">这是脚部5,固定在最底下</div>
</div>
.content{
min-height: calc(100vh - 50px);
}
.footer5{
height: 50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
```
meta.html
Raw Copy
<!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>Document</title>
<link rel="stylesheet" href="./meta.css">
</head>
<body>
<div class="phone">
<div class="wrapper1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="push"></div>
</div>
<div class="footer">这是脚部,固定在最底下</div>
</div>
<div class="phone">
<div class="wrapper2">
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<div class="push"></div>
</div>
<div class="footer2">这是脚部2,固定在最底下</div>
</div>
<div class="phone">
<div class="flex">
<div class="content">
<ul>
<li>1</li>
<li>2</li>
<li>2</li>
<li>2</li>
<li>3</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<div class="footer3">这是脚部3,固定在最底下</div>
</div>
</div>
<div class="phone">
<div class="absolute">
<div class="content">
<ul >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="footer4">这是脚部4,固定在最底下</div>
</div>
</div>
<div class="phone">
<div class="calc">
<div class="content">
<ul >
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<div class="footer5">这是脚部5,固定在最底下</div>
</div>
</div>
<script>
var html = ''
for(var i = 0;i<30;i++){
html+='<li>'+i+'</li>'
}
// setTimeout(() => {
// document.getElementById('test').innerHTML=html;
// }, 1000);
</script>
</body>
</html>
meta.css
Raw Copy
.phone {
display: inline-block;
margin-right: 30px;
height: 667px;
width: 375px;
overflow-y: auto;
border: 1px solid #ddd;
}
div,
ul,
li,
p,
h1,
h2,
h3,
h4,
h5 {
margin: 0;
}
/*方法一,内容wrapper负margin*/
.wrapper1 {
min-height: 100%;
margin-bottom: -50px;
}
.wrapper1 .push,
.footer {
height: 50px;
}
.footer {
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法2-底总负margin*/
.wrapper2{
min-height: 100%;
}
.wrapper2 .push,.wrapper2 .footer{
height: 50px;
}
.footer2{
margin-top: -50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法三:弹性布局*/
.flex{
min-height: 100%;
display: flex;
flex-direction: column;
}
.flex .content{
flex:1;
width: 100%;
}
.flex .footer3{
flex:50px 0 0;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法四:absolute定位*/
.absolute{
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}
.absolute .footer4{
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}
/*方法五:calc*/
.content{
min-height: calc(100vh - 50px);
}
.footer5{
height: 50px;
background: #f5f5f5;
line-height: 50px;
text-align: center;
}

Comment list( 0 )

You need to Sign in for post a comment

Help Search

Gitee_sixth 5th_float_left_close