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

最新推荐文章于 2022-12-06 15:24:02 发布

画一生情入颜容

最新推荐文章于 2022-12-06 15:24:02 发布

阅读量3w

点赞数 9

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/72830033

版权

想要页脚一直处于页面的底部，当内容少时，处于屏幕的底部，当页面内容很多时，在所有内容页脚在页面的最底部出现。好多人可能想到让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;
}

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

画一生情入颜容

关注

9
点赞
踩
23

收藏

觉得还不错? 一键收藏
1
评论
怎样使footer始终处于页面的底部

想要页脚一直处于页面的底部，当内容少时，处于屏幕的底部，当页面内容很多时，在所有内容页脚在页面的最底部出现。好多人可能想到让foot的position:fixed;bottom:0px，就可以实现页脚一直处于屏幕底部。但是这样做有几个缺点： ①.页脚所处的位置好像与页面分离了不美观。 ②.页脚可能会遮挡一部分页面内容。所以为了使页脚一直处于页面内容的底部，而不是始终固定在屏幕的底部。如果这是
复制链接

扫一扫