您的位置：首页 > 其它

怎样使footer始终处于页面的底部

2017-06-01 12:09 681 查看

想要页脚一直处于页面的底部，当内容少时，处于屏幕的底部，当页面内容很多时，在所有内容页脚在页面的最底部出现。好多人可能想到让foot的position:fixed;bottom:0px，就可以实现页脚一直处于屏幕底部。但是这样做有几个缺点：

①.页脚所处的位置好像与页面分离了不美观。

②.页脚可能会遮挡一部分页面内容。

所以为了使页脚一直处于页面内容的底部，而不是始终固定在屏幕的底部。

如果这是一个完整的页面时

<!DOCTYPE html>
<html>
<head>
<title>固定footer处于内容底部</title>
</head>
<body>
<div class = "container">
<div class = "content">
这是主体内容
</div>

<div class = "footer">
<span>这是页脚© 2017 CSDN</span>
</div>
</div>
</body>
</html>

你可以设置

html, body {
margin: 0;/*清除默认样式*/
padding: 0;
height: 100%;
}

.container {
position: relative;
margin: 0 auto;
height: auto !important;
height: 100%;
min-height: 100%;
}

.content {
padding: 1em 1em 5em;
font-size: 30px;
}

.footer {
position: absolute; /*相对于父元素contanier定位*/
width: 100%;
bottom: 0;/*始终距离它的父元素的底部为0px.则是处于父元素的最底*/
}

.footer{
position:relative;
width:100%;
background-color: #333;
color:#eee;
text-align: center;
font-size: 16px;
height: 50px;
}

.footer span{
line-height: 50px;
}

在这里必须要设置html和body的高度，不然直接设置内层的元素的height的百分比是不起作用的，因为body和html是所有元素的父元素。只有设置了body和html的百分比或者固定大小的时候，设置高度百分比就会根据这两个的大小来确定。

这里还采用了display: flex;实现弹性布局，即页面最小高度为92%（其他的8%是页脚的区域，当内容不够时将页脚展示在屏幕底部）。当内容大于92%时，就会采用display: flex;布局，将页脚自动添加到最底部。

第二种情况，就是当你的页面是一个片段时，怎样来进行布局，因为此时没有了body和html，没有办法进行百分比的设置。

<div class="header_top">
这是页面头部
</div>
<div class="movie-content">
页面的主题内容
</div>

<div class="foot">
<span>这是页脚 © 2017 csdn</span>
</div>

这样直接设置movie-content的最小高度就可以实现将页脚始终处于屏幕的底部。（最小高度一定得填满屏幕（除去foot））；

css样式设置如下

.movie-content
{
min-height: 600px;
}
.foot{
position:relative;
width:100%;
background-color: #333;
color:#eee;
text-align: center;
font-size: 16px;
height: 50px;
}

.foot span{
line-height: 50px;
}

这样不管内容多少，页脚始终会出现在屏幕合适的位置

a18f

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

标签：

相关文章推荐

新的分享

章节导航