让页脚始终在页面底部,不论页面内容是多或者少页脚始终在页面底部。
方法一:
/*css
----------------------------------------------------------------------------------------------------*/
body,html {
height: 100%;
margin: 0;
}
.wrap {
position: relative;
min-height: 100%;
}
.main {
margin-bottom: 30px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="wrap">
<div class="main">
</div>
<div class="footer"></div>
</div>
</body>
将html和body设置为高100%,将wrap相对定位最小高度为100%,footer相对wrap绝对定位到底部。
方法二:
/*css
----------------------------------------------------------------------------------------------------*/
body,html {
height: 100%;
margin: 0;
}
.main {
min-height: 100%;
}
.footer {
margin-top: -30px;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="main">
</div>
<div class="footer"></div>
</body>
将html和body设置为高100%,将main的最小高度设置为100%;将footer的margin-top的值设置为负的footer的高度大小。
方法三:
/*css
----------------------------------------------------------------------------------------------------*/
body {
padding: 30px 0;
box-sizing: border-box;
}
.main {
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 30px;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<body>
<div class="main">
</div>
<div class="footer"></div>
</body>
将html和body高度设置为100%,将给body设置下边距为footer的高度并将box-sizing设置为border-box;将footer相对于body绝对定位。
方法四:
/*css
----------------------------------------------------------------------------------------------------*/
body {
margin:0;
padding: 0;
}
.wrap {
box-sizing: border-box;
position: relative;
min-height: 100vh;
padding-bottom: 200px;
}
.footer {
position: absolute;
width: 100%;
height: 200px;
bottom: 0;
background-color: red;
}
/*html
----------------------------------------------------------------------------------------------------*/
<div class="wrap">
<div class="footer"></div>
</div>
将.wrap最小高度设置为视口高度,padding-bottom设置为footer的高度,将box-sizing设置为border-box。.footer相对.warp绝对定位。【注意!!!此方法也可不添加.wrap,直接用body替换.wrap标签的位置也可。body{…} –> html:< body >< div class=”footer” >< /div >< /body >】 Firefox、Chrome、Safari以及IE8以上支持vh。