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

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

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

怎样使footer始终处于页面的底部相关推荐

html 停留页面底部,HTML 中使 footer 始终处于页面底部
通常在页面中,需要使页脚 footer 部分始终处于底部.当页面高度不够 100% 时, footer 处于页面最底部,当页面内容高于 100% 时,页脚元素可以被撑到最底部. 方法一:绝对定位旋转 ...
footer始终在页面最底部的方法（问题待检验）
一.css方法 <style type="text/css"> html,body{ height: 100%; } body{ display: flex; flex ...
怎么让footer始终在页面底部？
当页面内容少时,footer页尾显示在屏幕的底部(一般会向上浮动,在屏幕的中间). 当页面内容多是,footer页尾也不会固定在屏幕的下方而是显示在整个页面的底部. 怎样才能实现以上两种效果呢代码如 ...
如何将footer标签固定在底部_如何让footer标签置于页面最底部
这次给大家带来如何让footer标签置于页面最底部,让footer标签置于页面最底部的注意事项有哪些,下面就是实战案例,一起来看一下. 需求:有时候,当页面内容较短,撑不开浏览器高度,但是又希望foo ...
css让footer始终位于页面的最底部
html代码结构为: <div class="container"> <div cass="header"></div> & ...
html中如何在页面底部增加,HTML中footer固定在页面底部的若干种方法
如果主体内容过短不足以支撑浏览器时,footer会上移,非常影响页面,算是一个大bug了,搜过很多种方法现整理一下footer固定在第的若干种方法,供以后参考.(欢迎大家积极补充.) 以上布局为给个人 ...
如何将footer标签固定在底部_让footer固定在页面底部
最近做了几个触屏版页面,页面比较简单,内容短,但是都有个底部,面对各种机型,底部不是一直处于底部位置,长屏.高分辨率的机子上的表现是悬在半空中,就像一根刺卡在喉咙啊.为此做了几种尝试. 其中有个活动的 ...
CSS查漏补缺（一）—页面内容不足铺满屏幕高度和有滚动条时，footer始终保持底部显示
记录一个项目中经常会用到的技巧,footer区(比如版权信息)要始终居于页面底部.如果用fixed定位显然不可取,因为要保证页面高度大于屏幕高度时,footer区要跟随着页面滚动保持在底部,如下图: ...
如何确保页脚始终位于页面底部？
在尝试创建精美的网站时,防止页脚在页面上浮动非常重要.内容较短的页面可能会遇到此问题,但只需几行 CSS 即可轻松修复.假设您的 HTML 看起来像下面的代码片段,这里有两种现代方法可以确保页脚始终位 ...
css实现让页面的footer始终位于底部
在写html页面布局的时候经常会遇到这样的情况:当页面内容较少的时候footer下面会有留白这样会很不好看,直接给footer,fixed定位的话当页面内容多的时候,footer又会盖住下面的内容.下 ...

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

怎样使footer始终处于页面的底部相关推荐

最新文章

热门文章