Following code sample will work for you, <style type=”text/css” media=”print”> @page { size: auto; /* auto is the initial value */ margin: 0; /* this affects the margin in the printer settings */ } </style> see the answer on Disabling browser print options (headers, footers, margins) from page? and specification of the @page
There is a simplified solution from bootstrap here (where you don’t need to create a new class): http://getbootstrap.com/examples/sticky-footer-navbar/ When you open that page, right click on a browser and “View Source” and open the sticky-footer-navbar.css file (http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar.css) you can see that you only need this CSS /* Sticky footer styles ————————————————– */ html { position: … Read more
Put Scripts at the Bottom The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is … Read more
This is precisely what position: fixed was designed for: #footer { position: fixed; bottom: 0; width: 100%; } Here’s the fiddle: http://jsfiddle.net/uw8f9/
To get a sticky footer: Have a <div> with class=”wrapper” for your content. Right before the closing </div> of the wrapper place the <div class=”push”></div>. Right after the closing </div> of the wrapper place the <div class=”footer”></div>. * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: auto !important; … Read more
This is now included with Bootstrap 2.2.1. Bootstrap 3.x Use the navbar component and add .navbar-fixed-bottom class: <div class=”navbar navbar-fixed-bottom”></div> Bootstrap 4.x <div class=”navbar fixed-bottom”></div> Don’t forget to add body { padding-bottom: 70px; } or otherwise the page content may be covered. Docs: http://getbootstrap.com/components/#navbar-fixed-bottom
Below are 4 different methods of mine: In each example the texts are freely-editable to illustrate how the content would render in different scenarios. 1) Flexbox body{ height:100vh; margin:0; } header{ min-height:50px; background:lightcyan; } footer{ min-height:50px; background:PapayaWhip; } /* Trick */ body{ display:flex; flex-direction:column; } footer{ margin-top:auto; } <body> <header contentEditable>Header</header> <article contentEditable>Content</article> <footer contentEditable>Footer</footer> … Read more
If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page. The same would work for a header element, just set top:0 instead. For example: <div class=”divFooter”>UNCLASSIFIED</div> CSS: @media screen … Read more