您的位置：首页 > Web前端 > CSS

CSS让脚部始终在页面底部

2016-07-08 14:34 603 查看

让页脚始终在页面底部，不论页面内容是多或者少页脚始终在页面底部。

方法一：

/*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。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css

相关文章推荐

新的分享

章节导航