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

来源：互联网发布：郑州公交线路查询软件编辑：程序博客网时间：2024/05/22 16:54

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

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

阅读全文

0 0