精华内容
下载资源
问答
  • HTML页脚始终固定在底部

    万次阅读 2018-10-17 10:41:33
    页脚固定在底部分两种情况考虑,一种是有滑动栏的情况,一种是没有的。后者比较简单,直接加上定位属性就是了,但是在页面内容是扩充整个页面以至于可以下滑浏览时,这时候单纯加上定位属性就不那么可行了,鉴于此我...
    页脚固定在底部分两种情况考虑,一种是有滑动栏的情况,一种是没有的。后者比较简单,直接加上定位属性就是了,但是在页面内容是扩充整个页面以至于可以下滑浏览时,这时候单纯加上定位属性就不那么可行了,鉴于此我写了一个通用的js方法帮我搞定所有可能页脚固定的情况。
    废话不多说,直接来干货
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    *{
      margin: 0;
      padding: 0;
    }
    div{
      vertical-align: middle;
      display: inline-block;
      float:left;
      text-align: center;
    }
    .footer{
      height: 50px;
      width: 80%;
      background:#111;
      color:white;
    }
    </style>
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    </script>
    <script>
    $(document).ready(function(){
    function t(){
    var e = $(".footer");//获取页脚div的对象
    var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值
    //判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度
    if(h < document.body.clientHeight){
    //当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了,当然这里也可以用绝对和相对属性
    //具体设置根据你实际情况来定吧
      $(".footer").css({position:"fixed",left:"20%",bottom:"0px"});
      return;
    }
    
    function t2(){
      var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度
    //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度
    if(a >= h){
    //如果页面内容太多,需要下滑展示的时候,给页脚一个固定定位属性
    $(".footer").css({position:"fixed",left:"20%",bottom:"0px"});
    }else{
    //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性,这样不论何时,它肯定是被页面撑起来固定到底部展示的。
     $(".footer").removeAttr("style");
    }
    }
    t2();
    //在页面大小改变时触发方法t2
     $(document).resize(t2);
     //在页面滑动时触发方法t2
     $(document).scroll(t2);
    }
    //直接运行方法t
    t();
    
    });
    </script>
    </head>
    <body>
    <div style='height:1500px;width:20%;background:blue;'><span style="line-height: 500px;color:white;">左侧导航栏</span></div>
    <div style='height:80px;width:80%;background:#ccc;'><span style="line-height: 80px;">这是一个页头</span></div>
    <div style='height:300px;width:30%;background:#AAA;'></div>
    <div style='height:150px;width:30%;background:#dda;'></div>
    <div style='height:150px;width:30%;background:#bbb;'></div>
    <div style='height:900px;width:80%;background:#eee;'></div>
    <div class='footer'><span style="line-height: 50px;">这是一个页脚</span></div>
    </body>
    </html>
    
    
    
    
    显示效果为

    在这里插入图片描述
    在这里插入图片描述

    本代码仅供参考,如有漏洞之处,欢迎指出。

    展开全文
  • HTML页脚无论内容怎么变都在网页的最底部废话不多说,直接代码贴上<!DOCTYPE html> <html> 网页底部固定 body{ margin: 0px auto; padd

    HTML页脚无论内容怎么变都在网页的最底部

    废话不多说,直接代码贴上

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>网页底部固定</title>
            <style>
                body{
                     margin: 0px auto; padding: 0px; width: 800px;
                }
                /*绝对定位**/
                .pos_foot {
                    position: absolute;bottom: 0;overflow: hidden;word-spacing: 3px;zoom: 1;
                }
                /*基本样式*/
                .foot {
                    width: 798px;border: 1px solid #000;height: 42px;
                }
            </style>
            <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    
        </head>
    
        <body>
            <div style="height: 80px;   border: 1px solid #0000EE;">头部</div>
            <div style="height: 200px;border: 1px solid #007020;">内容</div>
            <div id="footer" class="foot">底部</div>
    
            <!-- jquery脚本 -->
            <script>
                $(function() {
                    Footer();
                    //浏览器大小改变
                    $(window).resize(function() {
                        Footer();
                    });
                });
                 //自适应方法
                function Footer() {
                    var footer = $("#footer");
                    var body = $("body").outerHeight(true);
                    var liulanqi = $(window).height();
    
                    var top = footer.top;
                    var height = footer.outerHeight(true);
                    //alert(( height)+"   "+liulanqi)
                    if (body < liulanqi) {
                        footer.addClass("pos_foot");
                    } else {
                        footer.removeClass("pos_foot");
                    }
                }
            </script>
        </body>
    </html>
    展开全文
  • html页脚始终保持最下

    千次阅读 2014-05-04 11:47:27
    今天项目中原先没有页脚,但

    今天项目中原先没有页脚,但客户后来要求加页脚,但我发现某些内容较少的页面无法保证页脚在屏幕最下方.

    html结构如下:

    <body>
      <div class="body">
        <div class="header">
        </div>
        <div class="content">
        </div>
        <div class="footer">
        </div>
      </div>
    </body>


    于是我在页脚的php文件中写了一段js,意思是如果页面内容高度小于屏幕高度的话footer的margin-top等于屏幕高度-页面高度,从而达到始终保持在最下方的目的

    JS代码如下

    $(function(){
    	var wHeight = window.screen.height;
    	var h = $('.header').height();
    	var c = $('.content').height();
    	
    	if(wHeight > h+c){
    		var sub = wHeight - (h + c);
    		var marginTop = sub;
    	}
    	else{
    		var marginTop = 50;
    	}
    	$('.footer').css('margin-top', marginTop);
    })
    

    这段代码在FF和chrome中正常运行,但在IE8中页面加载好以后却需要双击footer才能正确显示,不知道为什么...

    后来改成:

    $(function(){
        var wHeight = window.screen.height;
        var h = $('.header').height();
        $('.content').height(wHeight - h);
    })

    问题解决.

    猜想: 是不是IE中对jq的css和height处理方式是不一样的?

    我不是专业前端,具体原因还请高手解惑


    展开全文
  • 给大家分享一个让页脚始终保持在文档底部的代码,不喜勿喷。 HTML部分 <body> <div style="height: 500px;width: 300px;background-color: blue;"></div> <footer id="footer"> ...

    给大家分享一个让页脚始终保持在文档底部的代码,不喜勿喷。

    HTML部分

    <body>
        <div style="height: 500px;width: 300px;background-color: blue;"></div>
    
        <footer id="footer">
            123456789
        </footer>
        
    </body>
    

    CSS部分

    * {
                margin: 0px;
                padding: 0px;
            }
            
            #footer {
                width: 100%;
                height: 30px;
                background: red;
                bottom: 0px;
                text-align: center;
                color: white;
            }
    

    JS部分

    <script>
        function a() {
            return document.compatMode == "BackCompat" ? document.body.clientHeight : document.documentElement.clientHeight;
            //标准兼容模式关闭,重新获取浏览器高度
        }
        var f = document.getElementById('footer');
        (window.onresize = function() {
            f.style.position = document.body.scrollHeight > a() ? '' : 'absolute';
        })();
    </script>
    

    我是一位小白,如果大家有更好的方法可以留言评论,谢谢大家!

    展开全文
  • jspdf 添加页眉页脚How To Build a Website With HTML 如何使用HTML构建网站This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup ...
  • [html] 打印页面时怎样自定义打印页眉页脚或者去掉眉页脚? <style type="text/css" media="print"> @page { size: auto; /* auto is the initial value / margin: 0mm; / this affects the margin in the ...
  • html 转 pdf 生成 页脚

    千次阅读 2019-05-15 14:19:48
    分享一个 html 转 pdf 生成每页页脚 具体 自行看源码,我页是在网上找的资料 侵权即删 网盘链接地址 提取码:uz84
  • 大学同人论文格式大部分情况下调整是很简单的,唯一有点难度的就是页眉和页脚据了解,大部分同学对页眉和页脚都是不会设置的,因为平时办公时并没有特殊的页眉页脚设置需求。今天,对论文的页眉和页脚的设置做个简单...
  • HTML设置固定页脚飘浮

    2019-10-01 19:38:40
    /* 页脚 */.footSty{bottom: 0pt; margin: 0pt; position: fixed; width: 100%; z-index: 10 ! important;}.footSty div{text-align: center; background-color: white; border-top: 1px solid #8BAABF; pad...
  • excel2007怎么插入页眉页脚?使用此功能一般是在打印的时候用得最多,设置页码,品牌标识,时间等等,每个版本的excel设置的方式都不一样,而且位置也不一样,这里仅以excel2007为说明。Excel2007插入页眉页脚的方法...
  • HTML5开发尚未完成。 但是,HTML5中有一些今天可以使用的新元素,当前和旧浏览器(带有shim)已经支持的元素,例如header , nav和footer 。 您可能已经在我们的HTML5教程中看到了这些元素,但实际上并没有真正...
  • 复制html页眉和页脚

    2017-03-15 21:38:03
    <p>I am currently developing a site in ... <li>Including the HTML code using PHP</li> <li>Including the HTML code with JQuery <p>Which one should be preferred? </div>
  • 如何重用html作为页脚

    2014-12-19 20:57:49
    <p>What exactly would the php file look like and what exactly would my html file look like (given the code as it currently is, below)? do I have to convert all my html files to ...
  • 打印html并去掉页眉页脚

    万次阅读 2017-06-21 01:51:54
    win10下测试ie11,chrome,firefox,edge 都可以成功去掉页眉页脚<!DOCTYPE html> <html> <title>print @page { size: auto; margin: 0m
  • printJs 打印HTML 去掉页眉页脚

    千次阅读 2020-10-22 17:26:14
    printJs 打印HTML 去掉页眉页脚 #直接上代码 const style = '@page {margin:0 10mm};' printJS({ // 设置打印区域id printable: "print_container", type: "html", targetStyles: ["*"], style, maxWidth: ...
  • 页脚

    2020-06-22 12:44:51
    如果可以对页脚应用固定的高度,则效果很好。 <div class="page-wrap"> Content! </div> <footer class="site-footer"> I'm the Sticky Footer. </footer> * { margin: 0; } html,...
  • 设置html页面打印的页眉页脚

    万次阅读 2018-01-10 14:28:01
    如下代码简单的清空页眉,也可以自己改改注册表试试,页脚只显示页码: HKEY hkey; CString keyPath = "Software\\Microsoft\\Internet Explorer\\PageSetup"; //打印之前设置IE打印时不打印页眉 页脚打印页号 ...
  • 之前我用table中的thead固定表头,但是表尾无法设置成每次换页都在当前页的最下面。...但是用HTML自带的页眉和页脚设置没办法设置样式,并且需要打印出来的页眉有的时候需要增加图片、修改文字的属性等。
  • 1、IE(Internet Explorer)浏览(V) 注册表位置 计算机\HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer\PageSetup 代码 说明 示例 &... ...
  • 下面小编就为大家带来一篇js 客户端打印html 并且去掉页眉、页脚的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • /********************************************************************* ... * 将HTML页脚固定在屏幕下方 * 说明: * 处理的方法好像是比较多的,个人还是比较倾向于用JS进行处理。 * * 20...
  • //生成页脚页数 ColumnText.showTextAligned(writer.getDirectContent(), Element.ALIGN_RIGHT, new Phrase(String.valueOf(document.getPageNumber() - 1), PDFBuilder.font), document.right(), document.bottom...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,428
精华内容 971
关键字:

html页脚