本文主要是介绍打印html页面，并在每个页面添加页眉和页脚，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
【方法一】：
1.网页点击打印时，打印渲染的页面每一页的头部都要有公司logo；
2.而且分页时不能让某一行的表格断开（必须在达到固定高度时让页面自动分页）；
@media screen {div.divHeader{display:none;}div.divFooter {display: none;}}@media print {div.divHeader{position:fixed;top:0;}div.divFooter {position: fixed;bottom: 0;} }<!--页眉 -->
<div class="divHeader">页眉</div><!-- 页脚-->
<div class="divFooter" >页脚
</div>【效果分析】：
打印出来的页脚存在与word文件的最后一行，但并不是页脚的位置。（自我感觉作用不大）
【方法二】：
<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:"3%",bottom:"0px"}); return; } function t2(){ var a = $(document).scrollTop()+document.documentElement.clientHeight-50;//获取页面滑动偏移量加页面可见区域的高度 //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 if(a >= h){ //如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性 $(".footer").css({position:"fixed",left:"3%",bottom:"0px"}); }else{ //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。 $(".footer").removeAttr("style"); } } t2(); //在页面大小改变时触发方法t2 $(document).resize(t2); //在页面滑动时触发方法t2 $(document).scroll(t2);
}
//直接运行方法t
t();
});
$(document).ready(function(){ function t(){ var e = $(".header");//获取页眉div的对象 var h = e.offset().top + e.height() ;//获取页脚偏移量加页脚高度的值//判断页脚div底部到页面顶端的实际距离是否小于页面可见区域高度 if(h < document.body.clientHeight){ //当页面刚好可以包容所有内容不需要下拉时直接加上个定位就是了，当然这里也可以用绝对和相对属性 //具体设置根据你实际情况来定吧 $(".header").css({position:"fixed",right:"3%",top:"0px"}); return; } function t2(){ var a = $(document).scrollTop()+document.documentElement.clientHeight;//获取页面滑动偏移量加页面可见区域的高度 //判断页脚div底部到页面顶端的实际距离是否小于页面滑动偏移量加页面可见区域高度 if(a >= h){ //如果页面内容太多，需要下滑展示的时候，给页脚一个固定定位属性 $(".header").css({position:"fixed",right:"3%",top:"0px"}); }else{ //当页面重新上滑页脚需要被隐藏的时候移除它的定位属性，这样不论何时，它肯定是被页面撑起来固定到底部展示的。 $(".header").removeAttr("style"); } } t2(); //在页面大小改变时触发方法t2 $(document).resize(t2); //在页面滑动时触发方法t2 $(document).scroll(t2);
}
//直接运行方法t
t();
});
</script><!--页眉 -->
<div style='background:#ccc;' class="header"><span style="line-height: 30px;">合同编号：<%=contractCount.getContractId() %></span>
</div><!-- 页脚-->
<div class='footer'><span style="height: 20px;">
<p align="center">我爱学习</p>
<small >我们是进步的好青年</small><small style="margin-left: 530px;">哈哈哈哈哈哈哈哈哈哈</small>
<small>Emila:cbuydfgcuadyrgf</small><small style="margin-left: 370px;">http://www.svdfvudhfguem</small></span></div>【效果分析】：
会出现页眉页脚处与打印的内容重合。
【资料】
一、HTML页脚始终固定在底部
这篇关于打印html页面，并在每个页面添加页眉和页脚的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
