将HTML的页脚固定在屏幕下方

/*********************************************************************
 *                 将HTML的页脚固定在屏幕下方
 * 说明:
 *     处理的方法好像是比较多的,个人还是比较倾向于用JS进行处理。
 *
 *                                   2017-8-25 深圳 龙华樟坑村 曾剑锋
 ********************************************************************/

一、参考文档:
    1. 将footer固定在页面底部的实现方法
        https://segmentfault.com/a/1190000004453249

二、采用代码:
    1. HTML:
        <body>
            <header>header</header>
            <main>main content</main>
            <footer>footer</footer>
        </body>
    2. CSS:
        html,body{margin:0;padding: 0;}
        header{background-color: #ffe4c4;}
        main{background-color: #bdb76b;}
        footer{background-color: #ffc0cb;}

        /* 动态为footer添加类fixed-bottom */
        .fixed-bottom {position: fixed;bottom: 0;width:100%;}
    3. JS:
        $(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);
        });

 

时间: 2024-09-24 13:48:36

将HTML的页脚固定在屏幕下方的相关文章

将页脚固定在页面底部的CSS实战

  页脚的位置问题 网页的页脚(footer),也就是通常用来放置帮助链接及版权信息的地方.页脚自然是应该位于页面底部的,但依照一般的做法,如果位于页脚之前的网页内容比较少,或者说使用了一个垂直分辨率较大的显示器,就有可能出现页脚看起来不在页面底部的情况,如下图. 由于页脚基本上是一个网站的所有页面公用的部分,不同页面的内容量有所差异,因此确实有可能某些页面内容不够而出现这样的问题.另外,尤其是包含了底色的页脚,发生这种问题会很影响美观. 所以,我们希望页脚能够无论网页内容量多少,都准确地位于底

最小高度100%页脚保持在底部的布局方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

Android开发之ListView页眉页脚效果VS android背景渐变

大家都知道,在我们调用ListView的addFooterView()方法给List增加一个页脚时,如果列表内容很多,超过了屏幕大小,那么页脚就看不到了,可我们一般想要的效果是如下图所示的,在ListView的内容超过屏幕时,页脚还在屏幕的底部. 本文将介绍上图所示的ListView效果,同时介绍一下在android中如何实现渐变效果,就像上图中的页眉页脚的背景色一样. 实现上面的效果主要使用几个RelativeLayout标签和ListView组合即可 转自 http://www.ideasa

最小高度100%页脚保持在底部的方法

有时候,我们用CSS创建一个高度自适应布局,如何保证页脚(footer)在内容不超过一屏的情况下始终保持在布局最下方是一个比较头疼的事.我看过一些利用绝对定位的例子,但总感觉不是那么完美,经过一下午的研究总结出一个利用负值外补丁的方法来实现这个效果的方法,兼容IE5.0+,Opera 8.5+,Firefox 1.5+.下面我们看步骤: 1.为了让浏览器识别高度100%我们需要先给 html 和 body 加上一个高度值,同时清除所有元素的 margin 和 padding.顺便提一下,经过我的

分页-如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示

问题描述 如何利用css print media打印样式对网页进行打印处理?固定页头和页脚?要求每页都要显示 求助?如何控制打印时分页,要求对列分页和对表格数据分页,打印时不要出现滚动条?路过的大神帮帮忙啊!不胜感激.打印界面如上图所示,数据界面 解决方案 这是数据界面,点击打印按钮,弹出打印界面,并渲染打印界面 解决方案二: fixed定位,不出现滚动条设置overflow:hidden @media print{ #top#foot{position:fixed;width;100%;lef

CSS+js Cookie实现的固定页脚广告条例子

经常看到有些网站为了吸引用户注意,在页面底部放置固定横幅广告,用户滚动页面时,横幅广告一直固定在页底,并不随页面滚动而滚动,当然一般允许用户可以关闭广告条,并设置一定时间内不再显示此广告条.本文将介绍使用CSS+Cookie来实现这一效果. HTML 首先,我们将横幅广告的html代码放到页面最底部,因为是最后加载的.也可以使用外部js动态插入到页面底部.整个HTML结构由遮罩层.float_layer,内容层.float_content组成,其中.float_bg为广告部分,内容可以是图片.文

jQuery Mobile的学习 jQuery Mobile工具栏、标题栏、页脚栏的定位学习

程序员都很赖,你懂的! 最近在做html5页面的开发,主要做智能终端设备的开发.对于内容比较少的页面,领导提出了要将页眉和页脚定位到网页的最上方和最下方.对于这样的要求,其实一点也不过分.但对于新手来说,确实很难,很不容易,今天我就将我学习的内容一起分享一下!放置页眉和页脚的方式有三种:     Inline - 默认.页眉和页脚与页面内容位于行内.     Fixed - 页面和页脚会留在页面顶部和底部.     Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部请

Excel 2003页眉页脚的另类设置

在Word与Excel中,我们可以自己设计有特色的页眉.页脚,让文档变得个性化,如在工作表的页眉或页脚处添加公司的标志图案,可以通过"视图→页眉和页脚",然后在"插入→图片→来自文件"中把公司的标志图片插入到页眉中.其实,在Excel 2003中新增了向工作表的页眉或页脚区域中添加图形文件的功能, 我们可以非常方便地在Excel工作表的页眉或页脚中增加图片. 1. 启动Excel,打开需要进行操作的工作簿文件,然后选择"文件"菜单中的"

Excel表格设置页眉页脚动画教程

<Excel2003入门动画教程17.Excel表格设置页眉页脚>. 演示动画 操作步骤 添加页眉:打开需要添加页眉页脚的Excel表格,执行"文件→页面设置"命令,打开"页面设置"对话框,切换到"页眉/页脚"标签下,单击其中的"自定义页眉"按钮,打开"页眉"对话框,将相应的页眉字符输入到左.中.右方框中,确定返回"页面设置"对话框. 注意:也可以利用上面的工具按钮,插入一些