您的位置：首页 > 网站优化 > css  >  css把底部footer固定在页面底部

css把底部footer固定在页面底部

 更新时间：2016年9月14日 14:19  点击：2261
固定在页面底部只要用到绝对定位了这个效果比定位在左边或右边要简单的多了我们来看看css把底部footer固定在页面底部的例子。

看完这篇文章后决定用第三个方法，其实很想用jq的，方便灵活，咨询了好多老前辈后，得知Js控制DOM在性能上影响比较大，能用css和html解决就不要用js了。
HTML

 代码如下 复制代码

<div id="container">
<div>.........</div>
&nbsp;
<div class="push"><!-- not put anything here --></div>
</div>
&nbsp;
<div id="footer">Footer Section</div>
CSS

html,
body{
    height: 100%;
    margin:0;
    padding:0;
}
#container {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -330px;/*margin-bottom的负值等于footer高度*/
}
.push,
#footer {
    height: 330px;
    clear:both;
}

html和body标签：html,body标签和前两种方法一样，需要设置“height:100%”并重置“margin”和“padding”为0；
div#container:方法三关键部分就在于div#container的设置，首先需要设置其最小高度（min-height）为100％,为了能兼容好IE6，需要对min-height进行兼容处理（具体处理方法看前面或代码）另外这里还有一个关键点在div#container容器上需要设置一个margin-bottom，并且给其取负值，而且值的大小等于div#footer和div.push的高度，如果div#footer和div.push设置了padding和border值，那么div#container的margin-bottom负值需要加上div#footer和div.push的padding和border值。也就是说“div#container{margin-bottom:-[div#footer的height+padding+border]或者-[div.push的height+padding+border]}”。一句话说：div#container的margin-bottom负值需要和div#footer以及div.push的高度一致（如果有padding或border时，高度值需要加上他们）；
div.push:在div.push中我们不应该放置任何内容，而且这个div必须放置在div#container容器中，而且是最底部，并且需要设置其高度值等于div#footer的值，最好加上clear:both来清除浮动。div.push容器在此处所起的作用就是将footer往下推。
div#footer容器：div#footer容器和方法二一样，不能放到div#container内部，而和div#container容器同级，如果需要设置元素和footer之间的间距，最好使用padding来代替margin值。

[!--infotagslink--]

相关文章

  • iOS新版微信底部返回横条问题的解决

    这篇文章主要介绍了iOS新版微信底部返回横条问题的解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-30

  • iOS新版微信底部工具栏遮挡问题完美解决

    这篇文章主要介绍了iOS新版微信底部工具栏遮挡问题完美解决,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-06-30

  • 微信小程序将页面按钮悬浮固定在底部的实现代码

    这篇文章主要介绍了微信小程序将页面按钮悬浮固定在底部的实现代码,代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-10-29

  • java固定大小队列的几种实现方式详解

    队列的特点是节点的排队次序和出队次序按入队时间先后确定,即先入队者先出队,后入队者后出队,这篇文章主要给大家介绍了关于java固定大小队列的几种实现方式,需要的朋友可以参考下...2021-07-15

  • vue移动端弹起蒙层滑动禁止底部滑动操作

    这篇文章主要介绍了vue移动端弹起蒙层滑动禁止底部滑动操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-22

  • css把底部footer固定在页面底部

    固定在页面底部只要用到绝对定位了这个效果比定位在左边或右边要简单的多了我们来看看css把底部footer固定在页面底部的例子。 看完这篇文章后决定用第三个方法，其...2016-09-14

  • ASP.NET 固定标题列与栏位的具体实现

    客户提这个要求很久了，最近才时间弄，但是看到百度中要没有很多详细的代码。废话不多说直接贴代码。...2021-09-22

  • Android如何实现底部菜单固定到底部

    这篇文章主要介绍了Android如何实现底部菜单固定到底部,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-22

  • jQuery检测滚动条是否到达底部

    这篇文章主要介绍了jQuery检测滚动条是否到达底部的实现方法，文中介绍了两种检测滚动条到达底部的状况，感兴趣的小伙伴们可以参考一下...2015-12-17

  • 如何在把超过固定长度的文字以"……"表示

    有次，有个以前的同事（是个小MM）问我一个问题：她想在一个网页中显示一个文章标题的列表，但是考虑到有的标题太长，影响美观，就想参照别的网站上的样式，把超过固定长度的文字...2016-11-25

  • JS当前页面登录注册框,固定DIV,底层阴影的实例代码

    下面小编就为大家带来一篇JS当前页面登录注册框,固定DIV,底层阴影的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-02

  • 一个用jquery写的判断div滚动条到底部的方法【推荐】

    下面小编就为大家带来一篇一个用jquery写的判断div滚动条到底部的方法【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧...2016-05-04

  • asp.net网站底部的版权信息实现代码且可维护

    网站底部的版权信息在特殊情况还是比较重要的所以在实现的时候一定要尽可能的做到可维护性,接下来将介绍一些技巧可达到可维护效果，感兴趣的你可不要错过了哈...2021-09-22

  • CSS绝对定位固定定位详解

    CSS绝对定位固定定位是通过position 为 relative/absolute/fixed 祖先元素进行定位即可达到我们的要求了，下面一起来看看。 绝对定位 的元素基于最近的 position...2016-09-14

  • JS实现部分HTML固定页面顶部随屏滚动效果

    这篇文章主要介绍了JS实现部分HTML固定页面顶部随屏滚动效果,涉及JavaScript响应onscroll事件动态操作页面元素属性的相关技巧,需要的朋友可以参考下...2015-12-25

  • 浅析jquery如何判断滚动条滚到页面底部并执行事件

    jquery如何判断滚动条滚到页面底部并执行事件？下面小编就为大家带来一篇jquery判断滚动条滚到页面底部并执行事件方法。希望对大家有所帮助，一起跟随小编过来看看吧...2016-05-04

  • Android监听ScrollView滑动到顶端和底部例子

    在开发中返回顶部与底部我们经常会用到了，下面我们来看一篇关于Android监听ScrollView滑动到顶端和底部例子，具体的如下所示。 package zm.scroolview; import andr...2016-09-20

  • Android开发之底部导航实现总结

    下面我们来看一篇关于Android开发之底部导航实现总结，希望这篇文章能够帮助到各位朋友，有兴趣的同学可以和小编一起来看看吧。 底部导航有很多种实现方式。目前...2016-10-02

  • C#实现将窗体固定在显示器的左上角且不能移动的方法

    这篇文章主要介绍了C#实现将窗体固定在显示器的左上角且不能移动的方法,涉及C#窗体固定操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25

  • docker compose自定义网络实现固定容器ip地址

    这篇文章主要介绍了docker compose自定义网络实现固定容器ip地址，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-03-31