html - quitar - margenes impresion css
Imprimir el pie de página de la tabla en la parte inferior de la última página (3)
Estoy usando una tabla para crear un pie de página en cada página (funciona en Firefox, eso es suficiente).
Un violín JS: https://jsfiddle.net/j9k2xzze/
(haga clic derecho en el panel de salida -> Este Marco -> Abrir Marco en Nueva Pestaña. Luego, la Vista Previa de Impresión funcionará normalmente)
<table id="wrapper">
<thead>
<tr>
<td id="header"></td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="0" id="footer">
<img src="footer.jpg"/>
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td id="content">
<?php echo $html; ?>
</td>
</tr>
</tbody>
</table>
Pero en la última página, el pie de página de la tabla se muestra directamente debajo del texto. Si el texto es más corto que la última página, el pie de página se adhiere a él.
Me gusta que el pie de página esté en la parte inferior de la última página. Lamentablemente, la extensión @page no funciona en Firefox o lo estoy haciendo mal:
@page:last {
#footer {
position: absolute;
bottom: 0;
}
}
Esta es una pregunta divertida, nunca encontré / necesitaba esto, así que aprendí algo nuevo también. Pero aquí está mi solución de trabajo en resumen (de hecho, estabas bastante cerca):
Con #wrapper { position: relative } , #header , #footer y #content { position: absolute } y las reglas adicionales de ubicación y altura de su CSS ( HTML sin cambios) usted tiene el control total del diseño. Tu código podría verse más o menos así:
Fragmento debajo, jsFiddle: fiddle y violín
html,body { height: 100%; width: 100%; overflow: hidden }
#wrapper {
position: relative;
height: 95%; width: 100%;
}
#wrapper #header {
position: absolute;
top: 0;
height: 100px;
}
#wrapper #content {
position: absolute;
top: 100px;
}
#wrapper #footer {
position: absolute;
bottom: 0;
}
@media print {
h1 {
page-break-before: always;
}
@page {
size: A4;
margin: 0;
}
}
<table id="wrapper">
<thead>
<tr>
<td id="header">HEADER TEXT</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="0" id="footer">
<img src="https://unsplash.it/200?image=031" />
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td id="content">
Welcome
<h1>NEXT PAGE</h1>
just one line
</td>
</tr>
</tbody>
</table>
Hola, acabo de agregar la siguiente consulta de medios a su CSS. Y FUNCIONA
@media print {
#footer {
position: absolute;
bottom: 0;
}
}
Compruebe el siguiente violín
Si solo ayudas a Firefox, en realidad es muy fácil (salta a la edición para ver una técnica que también funciona en IE, pero es menos versátil). Simplemente agregue un margen inferior grande al final de su contenido. Debe ser lo suficientemente grande como para garantizar que se ejecutará más allá del final de la página. El navegador asume que no desea imprimir una página en blanco al final de su documento, por lo que corta tanto margen como sea necesario para evitarlo, manteniendo solo lo suficiente para empujar el pie de página al pie de la página.
Puede poner el margen en un pseudo-element para mantener su HTML ordenado, y puede usar @media print para evitar que se muestre en la pantalla.
Aquí está el código. Para ver cómo funciona en Firefox, abre este jsfiddle , haz clic con el botón derecho en la salida, selecciona Este marco> Mostrar solo este marco y haz una vista previa de impresión.
@media print {
#content:after {
display: block;
content: "";
margin-bottom: 594mm; /* must be larger than largest paper size you support */
}
}
<table>
<thead>
<tr>
<th>PAGE HEADER</th>
</tr>
</thead>
<tfoot>
<tr>
<td>PAGE FOOTER</td>
</tr>
</tfoot>
<tbody>
<tr>
<td id="content">
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content
</td>
</tr>
</tbody>
</table>
Esta técnica no funciona en ningún navegador, excepto en Firefox. En IE, cuando se produce un salto de página dentro de un margen vertical, se elimina todo el margen, que en realidad es el comportamiento correcto de acuerdo con el W3C (sección 13.3.3), pero no se preocupe, el comportamiento de Firefox es efectivamente idéntico, excepto cuando hay un pie de tabla, y en ese caso es mejor, así que dudo que vaya a cambiar.
Chrome y los otros navegadores Webkit (Safari, Opera) ni siquiera son compatibles con la repetición de los pies de página, por lo que son irrelevantes. Supongo que no he probado este enfoque en Edge, pero estoy bastante seguro de que no funcionará.
EDITAR
Hay otra opción que funciona tanto en Firefox como en IE. Todo lo que tiene que hacer es colocar el pie de página en un <div> separado y fijarlo en la parte inferior de la página, y luego usar el <tfoot> repetición como espaciador. Sin embargo, este enfoque tiene algunos inconvenientes menores (detalles debajo del fragmento).
Aquí está el código. Para ver cómo funciona en Firefox, abre este jsfiddle , haz clic con el botón derecho en la salida, selecciona Este marco> Mostrar solo este marco y haz una vista previa de impresión. En IE, haga clic en el cuadro de salida, presione CTRL + A, haga una vista previa de impresión y cambie "Como se muestra en la pantalla" a "Como seleccionado en la pantalla".
@media print {
#spacer {height: 2em;} /* height of footer + a little extra */
#footer {
position: fixed;
bottom: 0;
}
}
<table>
<thead>
<tr>
<th>PAGE HEADER</th>
</tr>
<thead>
<tfoot>
<tr>
<td id="spacer"></td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content<br>
content<br>content<br>content<br>content<br>content<br>content<br>content
</td>
</tr>
</tbody>
</table>
<div id="footer">
PAGE FOOTER
</div>
La principal limitación de este método es que pone un pie de página idéntico en cada página del trabajo de impresión, lo que significa que no puede tener páginas con un pie de página diferente o sin pie de página. Además, como la altura del espaciador depende de la altura del pie de página, tendrá que ajustarla si la altura del pie de página cambia alguna vez.