Chrome printed page how to customize the header and footer
Window. The print ();
Everyone a great god, and worship for help ah...
CodePudding user response:
<meta charset="utf-8"/& gt;
<meta HTTP - equiv="X - UA - Compatible" content="IE=edge, chrome=1"/& gt;
The name of the page & lt;/title> <br/><style type="text/CSS" & gt; <br/>The header and footer {<br/>display: none; <br/>} <br/>@ media print {<br/>The header {<br/>display: block; <br/>} <br/>Footer {<br/>display: block; <br/>} <br/>} <br/></style> <br/></head> <br/><body> <br/><br/><Header> The header & lt;/header> <br/><br/><p> The content & lt;/p> <br/><br/><Footer> The footer & lt;/footer> <br/><br/></body> <br/></html> <br/><br/></pre><p class="article - content rp"> CodePudding user response: </p><strong> <em> <span style="text - decoration: underline;"> <img SRC="https://img.codepudding.com/202009/89190201721151.gif" Alt=""/> </span> </em> </strong><p class="article - content rp"> CodePudding user response: </p><br/> <pre> HTML structure<br/><Div & gt; <br/><Div & gt; The content & lt;/div> <br/><Div & gt; The footer & lt;/div> <br/></div> <br/></pre> <br/><br/>CSS <br/><pre> HTML, body {<br/>height: 100%; <br/>} <br/><br/>The wrapper {<br/>position: relative; <br/>Min - height: calc 40 px (100%);//here you can adjust the <br/>Padding - bottom: 40 px; <br/>box-sizing: border-box; <br/>} <br/>The footer {<br/>position: absolute; <br/>Bottom: 0; <br/>height: 40px; <br/>width: 100%; <br/>text-align: center; <br/>The line - height: 40 px; <br/>} <br/></pre> <br/><p class="article - content rp"> CodePudding user response: </p>Upstairs all not line, will be obscured, emmmm, and prayed to the </div>
<div class="th_page th_page_color"></div>
<div class="umCopyright">
<p>Page link：<a href="/frontend/15824.html" target="_blank" style="color:#999">https//www.codepudding.com/frontend/15824.html</a></p>
</div>
<div class="detail-arr">
<div class="detail-arr-left">Prev:<a href='/frontend/15823.html'>Today found a es6 strange place</a></div>
<div class="detail-arr-right">Next:<a href='/frontend/15825.html'>How to cancel the Live reload enabled. This tip? Open the web page to refresh after cancel the remin</a></div>
</div>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="hot-tags neitags">
<ul>
<li><i class="iconfont icon-x-tags"></i> Tags： </li>
<a href='/e/tags/?tagname=JavaScript' target='_blank'>JavaScript</a> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="xiangguan">
<ul class="msg msghead">
<li class="tbname">Related</li>
</ul>
<ul> </ul>
</div>
</div>
</div>
</div>
<div class="container th_top">
<div class="row">
<div class="col-md-12">
<div class="flinks">
<ul>
<li><i class="iconfont icon-x-tags"></i> Links： </li>
<li class="liflinks"><a target="_blank" href="/" title="CodePudding">CodePudding</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="footer">
<p><span style="font-size:16px;color:#666;font-weight: bold">About Us:</span> <a href="https://www.codepudding.com/contact.html">Contact Us</a> <a href="https://www.codepudding.com/service.html">Terms of Service</a> <a href="https://www.codepudding.com/privacy.html">
Privacy Policy</a></p>
<p class="foot_info">Copyright © 2010-2023，Powered By <a href="/" target="_blank">CodePudding</a> </p>
</div>
<script type="text/javascript" src="/skin/code/tianhu.js"></script>
</body></html>