footer固定在页面底部的实现方法总结

更新日期: 2018-12-04阅读: 2.9k标签: 页面

方法一:footer高度固定+绝对定位

html代码

<body>
    <header>头部</header>
    <main>中间内容</main>
    <footer>底部信息</footer>
</body>

css代码:

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    margin:0;
    padding:0;
    position:relative;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    padding-bottom:100px;
    background:#ccc;
    text-align: center;
}
footer{
    position:absolute;
    color:#fff;
    bottom:0;
    width:100%;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color: #000;
}
  • 首先,设置body的高度至少充满整个屏幕,并且body作为footer绝对定位的参考节点;
  • 其次,设置main(footer前一个兄弟元素)的padding-bottom值大于等于footer的height值,以保证main的内容能够全部显示出来而不被footer遮盖;
  • 最后,设置footer绝对定位,并设置height为固定高度值。
优点:footer一直存在于底部。
缺点:中间区域main如果内容不够,不能撑满页面的中间区域。


 方法二:footer高度固定+margin负值

HTML代码:

<body>
    <div class="container">
        <header>头部</header>
        <main>中间内容</main>
    </div>
    <footer>底部信息</footer>
</body>

CSS代码:

*{
    margin:0;
    padding:0;
}
html,body{
    height:100%;
}
.container{
    min-height:100%;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ 
    padding-bottom:100px;
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    height:100px;
    line-height:100px;
    margin-top:-100px;
    text-align:center;
    background-color: #000;
}

此方法把footer之前的元素放在一个容器里面,形成了container和footer并列的结构:
首先,设置.container的高度至少充满整个屏幕;
其次,设置main(.container最后一个子元素)的padding-bottom值大于等于footer的height值;
最后,设置footer的height值和margin-top负值。

展示效果跟第一种是一样的,缺点跟第一种也是一样的。


方法三:footer高度任意+js

HTML代码:

<header>头部</header>
<main>中间内容</main>
<footer>底部信息</footer>

CSS代码:

*{
    margin:0;
    padding:0;
}
html{
    height:100%;
}
body{
    min-height:100%;
    margin:0;
    padding:0;
    position:relative;
}

header{
    background: #000;
    text-align: center;
    height:50px;
    line-height: 50px;
    color:#fff;
}
main{ /* main的padding-bottom值要等于或大于footer的height值 */
    background:#ccc;
    text-align: center;
}
footer{
    color:#fff;
    width:100%;
    height:100px;
    line-height:100px;
    text-align:center;
    background-color: #000;
}
/* 动态为footer添加类fixed-bottom */
.fixed-bottom {
    position: fixed;
    bottom: 0;
    width:100%;
}

JS(jquery)代码:

$(function(){
    function footerPosition(){
        $("footer").removeClass("fixed-bottom");
        var contentHeight = document.body.scrollHeight,//网页正文全文高度
            winHeight = window.innerHeight;//可视窗口高度,不包括浏览器顶部工具栏
        if(!(contentHeight > winHeight)){
            //当网页正文高度小于可视窗口高度时,为footer添加类fixed-bottom
            $("footer").addClass("fixed-bottom");
        }
    }
    footerPosition();
    $(window).resize(footerPosition);
});


常用的纯css实现footer sticker

CSS代码:

html, body, #sticker {height: 100%;}
    body > #sticker {height: auto; min-height: 100%;}
    #stickerCon {padding-bottom: 40px;} 
    #footer {margin-top:-40px; height: 40px; width: 100%; text-align: center; line-height: 40px; color: #ABA498; font-size: 12px; background: #fafafa; border-top:1px solid #E7E7E7;}

HTML代码:

<div id="sticker">
    <div id="stickerCon"></div>
</div>
<div id="footer">footer</div>

 

链接: https://fly63.com/article/detial/1485

js禁止页面回退的方法(使浏览器后退按钮失效)

这篇文章主要为大家详细介绍js禁止页面回退的方法(使浏览器后退按钮失效),具有一定的参考价值,感兴趣的小伙伴们可以参考一下

页面重定向的几种方法

html重定向就是通过各种的方法将各种网络请求重新定个方向转到其它位置。 在网站建设中,时常会遇到需要网页重定向的情况:像网站调整,如改变网页目录结构,网页被移到一个新地址

html页面实现返回上一页浏览位置

如果上一页是静态页面,可以用 history.go(-1)方法;页面采用了vue,页面每次加载都会去请求数据,用history.go(-1)方法返回上一页,上一页的页面因为重新请求数据,页面不会定位到上次浏览的位置;

在静态页面中使用 Vue.js

不使用Node.js, NPM, Webpack 等, 在静态页中使用Vue.js. 包括路由, 单文件组件. index.html做为项目的首页, 主要用来定义页面框架, 加载必需的css和script.这里使用element-ui的导航菜单组件搭建了一个页面框架.

js监听用户进入和离开当前页面

VisibilityChange 事件;用于用户是否离开当前页面;页面的 visibilityState属性可能返回三种状态 prerender,visible 和 hidden ;监听 visibility change 事件;页面变为不可见时触发

Flutter 之页面切换(基本路由)

一个应用程序通常由多个页面组成,而统一管理页面之间跳转的机制通常被称为路由管理或导航管理,在 Flutter 中,页面之间的跳转是通过 Route 和 Navigator 来管理的

解决webapck多页面内存溢出

因为自己的项目是基于vue-cli3进行开发,所以这里只讨论这种情况下的解决办法 ,在进行多页面开发的时候,项目刚开始阶段,因为文件较少,所以代码编译速度还行,但是随着项目逐渐增大

JS内嵌多个页面,页面之间如何更快捷的查找相关联的页面

假设parent为P页面,P页面有两个子页面,分别为B页面和C页面;B页面和C页面分别内嵌一个iframe,分别为:D页面和E页面,现在通过B页面的内嵌页面D的方法refreshEpage(eUrl)来加载内嵌页面E的内容.

Flutter页面跳转传参

路由(Route)在移动开发中通常指页面(Page),这跟web开发中单页应用的Route概念意义是相同的,Route在Android中通常指一个Activity,在iOS中指一个ViewController。所谓路由管理,就是管理页面之间如何跳转,通常也可被称为导航管理

vue进入页面时不在顶部,检测滚动返回顶部按钮

这里是本小白使用时遇到的问题及个人使用的方法可能并不完美。监测浏览器滚动条滚动事件及滚动距离,一般给window绑定监测事件就能获得window.pageYOffset滚动距离。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!