I would like to know how to set a Header and a Footer on each page to be printed , making content stay between them [Edit] respecting header space and footer . I would also like to take advantage of it and ask how does the div's 'zebras' appear at the time of printing.
Follow current code
body {
width: 99%;
height: 950px;
}
.brasao-umuarama {
width: 99%;
height: auto;
}
.logo-drz {
width: 85%;
margin-top: 5%;
}
.logo-maptriz {
width: 23%;
}
.categoria {
padding: 1%;
}
.edificacoes {
page-break-before: always;
}
.zoneamento {
page-break-before: always;
}
.bold {
font-weight: bold;
}
.small {
font-size: small;
}
.smaller {
font-size: smaller;
}
.strip {
background-color: #f0f0f0;
-webkit-print-color-adjust: exact;
}
/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen and (min-width: 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen and (min-width: 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen and (min-width: 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio:1.5),
only screen and (min-device-pixel-ratio:1.5) {
/* Styles */
}
@media print {
header {
position: fixed;
display: block;
}
footer {
position: fixed;
display: block;
bottom: 0px;
}
}
@page{
mso-title-page:yes;
}
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" media="print">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>Consulta de Viabilidade</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-http://pt.stackoverflow.com/questions/ask#bootstrap/3.3.7/css/bootstrap-theme.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.css" />
<link rel="stylesheet" href="css/index.css" />
</head>
<body class="container">
<header>
<div class="row" style="border-bottom: 1px solid #000">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<img src="images/brasao-umuarama.svg" alt="Brasão de Umuarama" class="brasao-umuarama img-responsive">
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<div class="text-center">
<h2>Prefeitura de Umuarama - PR</h2>
<h3>Secretaria Municipal do Urbanismo</h3>
</div>
</div>
<div class="col-xs-2 col-sm-2col-md-2 col-lg-2">
<img src="images/logo-drz.svg" class="logo-drz img-responsive" />
</div>
</div>
</header>
<!-- Conteúdo -->
<div class="conteudo">
<!-- Informações Cadastrais -->
<section class="categoria">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Informações Cadastrais</h4>
</div>
<div class="conteudo"></div>
<div class="panel-body">
<!-- Dados Imobiliários -->
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Inscrição Imobiliária</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">n/d</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Número Lote</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">2</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Cadastro</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">478100</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Seção</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">1</i>
</div>
</div>
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Número de Quadra</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">38</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Setor</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">1</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Endereço</span>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
<i class="small">RUA PADRE CICERO ROMAO BATISTA </i>
</div>
</div>
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Complemento</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">n/d</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Número</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-4">
<i class="small">1630</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-2">
<span class="bold">Bairro</span>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-10">
<i class="small">CENTRO</i>
</div>
</div>
</div>
</div>
</section>
<section class="categoria">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Mockup</h4>
</div>
<div class="panel-body">
<div class="mapa text-center">
<img src="images/exemplo_mapa.png" class="img-rounded img-responsive" width="98%" />
</div>
</div>
</div>
</section>
<section class="categoria edificacoes">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Edificações</h4>
</div>
<div class="panel-body">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Edificação 1</h4>
</div>
<div class="panel-body">
<!-- Proprietário -->
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Nome Proprietário</span>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<i class="smaller">SEBASTIÃO RIBAS MACHADO E SILVA</i>
</div>
</div>
<!-- Complemento Endereço -->
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="visible-sm visible-xs bold"><abbr title="Complemento">Comp. Endereço</abbr></span>
<span class="hidden-sm hidden-xs bold">Complemento Endereço</span>
</div>
<div class="col-xs-9 col-sm-9 col-md-9 col-lg-9">
<i class="smaller">EDIFICIO MINAS GERAIS, APTO 101, GAR-01</i>
</div>
</div>
<!--Dimensões Edificação -->
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Área Cadastro</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">100 m²</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Área Imagem </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">150 m²</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Categoria Edificão</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Uso Habitacional</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold hidden-xs">Situação Edificação </span>
<span class="bold visible-xs">Situação <abbr title="complemento">Edif.</abbr></span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Fundos</i>
</div>
</div>
<!-- Conservação -->
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold hidden-xs hidden-sm">Estado Conservação</span>
<span class="bold visible-xs visible-sm">Estado <abbr title="complemento">Conserv.</abbr></span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Ótimo</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Idade Aparente </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Nova</i>
</div>
</div>
<!-- Beiral -->
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Percentual Beiral</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">10 %</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold hidden-xs">Largura Beiral </span>
<span class="bold visible-xs"><abbr title="complemento">Nova</abbr></span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">15 m</i>
</div>
</div>
<!-- Caracteristicas da Edificação -->
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Tipo Construção</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Alvenaria</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Estrutura </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Concreto</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Forro</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Madeira</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Paredes </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Rebocadas</i>
</div>
</div>
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Piso</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">n/d</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Fachada </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">n/d</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Instalação Elétrica</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Sim</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Instação Sanitária</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Sim</i>
</div>
</div>
<div class="row strip">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Posicionamento</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Recuada</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Alinhamento </span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">n/d</i>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Situação</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">Recuada</i>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<span class="bold">Cor</span>
</div>
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3">
<i class="smaller">n/d</i>
</div>
</div>
<!-- Imagens -->
<div class="row categoria strip">
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<img src="photos/foto_1.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
<span style="font-size: smaller">Foto_1.jpg</span>
</div>
<div class="col-xs-6 col-sm-6 col-md-3 col-lg-3">
<img src="photos/foto_2.jpg" alt="Foto 1" class="img-thumbnail img-responsive" />
<span style="font-size: smaller">Foto_2.jpg</span>
</div>
</div>
<!-- Documentos 7 -->
<div class="row text-center" style="padding: 1%">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento1.doc</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento2.doc</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento3.doc</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento4.doc</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento5.doc</p>
</div>
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<i class="fa fa-file-text-o fa-5x"></i>
<p style="font-size: smaller">Documento6.doc</p>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="categoria zoneamento">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Zoneamento</h4>
</div>
<div class="panel-body">
<div class="row strip">
<div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
<span class="bold">Categoria Zoneamento</span>
</div>
<div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
<i class="small">Categoria 1</i>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-6 col-md-6 col-lg-6">
<span class="bold">Subcategoria Zoneamento</span>
</div>
<div class="col-xs-8 col-sm-6 col-md-6 col-lg-6">
<i class="small">Subcategoria 1</i>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">Permissões</h4>
</div>
<div class="panel-body">
<!-- Permitidos -->
<div class="row strip">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="bold">Permitidos</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1col-lg-1">
<i class="small">H1</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">C1</i>
</div>
<div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
<span></span>
</div>
</div>
<!-- Permissiveis -->
<div class="row">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="bold">Permissiveis</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">H2</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<span>H5</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">C2</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">CS1</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i>I1</i>
</div>
<div class="col-xs-5 col-sm-5 col-md-5 col-lg-5">
<span></span>
</div>
</div>
<div class="row strip">
<div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
<span class="bold">Proíbidos</span>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">H3</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">H4</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">C3</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">C4</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">CS2</i>
</div>
<div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
<i class="small">I2</i>
</div>
<div class="col-xs-4 col-sm-4 col-md-1 col-lg-4"></div>
</div>
</div>
</div>
</section>
</div>
<footer style="border-top: 1px solid #000">
<div class="row">
<!-- Telefone -->
<div class="col-xs-3 col-sm-3 col-md-2 col-lg-2">
<span class="fa fa-phone"></span>
<small>(44) 3621 - 4141</small>
</div>
<!-- Endereço -->
<div class="col-xs-4 col-sm-5 col-md-7 col-lg-8">
<span class="fa fa-home"></span>
<small>Avenida Rio Branco, 3717, Centro Umuarama - PR Cep 87000-000</small>
</div>
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2">
<span class="fa fa-globe"></span>
<small>www.umuarama.gov.pr.br</small>
</div>
</div>
</footer>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script><scripttype="text/javascript" src="js/index.js"></script>
</body>
</html>