How do I fix footer on the print page?

Question

How do I fix footer on the print page?

Navigation

#1 by (3 votes)

1

I need to leave some information in the page footer.

How do I do this?

Below is the complete code I'm using, but that's not working!

css:

.container {
    height: auto; min-height: 100%; 
}

html:

<div id="container">
        <nav>
<?php
$edit_data      = $this->db->get_where('prescription', array('prescription_id' => $param2))->result_array();
foreach ($edit_data as $row):
$patient_info   = $this->db->get_where('patient' , array('patient_id' => $row['patient_id'] ))->result_array();
?>
    <div id="prescription_print">
<div>
<?php
    $data = $this->db->get_where('doctor' , array('doctor_id' => $row['doctor_id'] ))->row();
?>
   <b><?php echo 'Drº ', $data->name;?> | <?php echo ' ', $data->profile;?></b>



                        <br>
                        <br>
                        <br>

                    <?php foreach ($patient_info as $row2){ ?>
                        <?php echo 'Nome do Paciente: '.$row2['name']; ?><br>

                <br>
                        <br>
                        <b><?php echo get_phrase('medication'); ?> :</b>

                        <p><?php echo $row['medication']; ?></p>
                        <br>
                        <br> 
                        <?php } ?>

                    <?php echo 'Data: '.date("d M, Y", $row['timestamp']); ?>
                    <br></nav></div>
                      </section><footer>           
<?php
    $data = $this->db->get_where('doctor' , array('doctor_id' => $row['doctor_id'] ))->row();
?>
   <b><?php echo ' ', $data->address;?><?php echo ' ', $data->email;?><b><?php echo ' ', $data->phone;?></b><br></footer>
</div> 
                </div>

    </div>



    <br>

    <a onClick="PrintElem('#prescription_print')" class="btn btn-primary btn-icon icon-left hidden-print">
        Imprimir Prescrição
        <i class="entypo-doc-text"></i>
    </a>
<?php endforeach; ?>




<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
    }

    function Popup(data)
    {
        var mywindow = window.open('', 'prescription', 'height=400,width=600');
        mywindow.document.write('<html><head><title>Prescription</title>');
        mywindow.document.write('<link rel="stylesheet" href="assets/css/neon-theme.css" type="text/css" />');
        mywindow.document.write('<link rel="stylesheet" href="assets/js/datatables/responsive/css/datatables.responsive.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.print();
        mywindow.close();

        return true;
    }

</script>

html css

asked by anonymous 24.08.2015 / 00:27

1 answer

generate php image without saving to disk and send attachment Initiation with Arduino [closed]

score 3 · Answer 1

Note: The examples here have been tested on Chrome40 +, Opera31, InternetExplorer9 and Firefox40.0.2.

A print page

A simple example is to use position: fixed :

Note: StackSnippet does not work.

<!DOCTYPE html>
<html>
<head>
    <title>Página unica</title>

    <!-- Evitar o quircksmode no IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <style type="text/css">
    @media print {
        footer {
            position: fixed;
            bottom: 0;
        }
    }
    </style>
</head>
<body>
    <div class="container">
        <p>Olá mundo!</p>
    </div>
    <footer>Rodapé</footer>
</body>
</html>

However it only works with one page.

Multiple page footer:

Note that I used .footer to create the footers that should only appear in the printout and the footer (no dot) to the version viewed in webbrowser .

Note: You will notice the use of background-color , they are only to understand the effect and can be removed.

Read the comments in the code:

<!DOCTYPE html>
<html>
<head>
    <title>Multiplas páginas</title>

    <!-- Evitar o quircksmode no IE -->
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">

    <style type="text/css">
    div.page div.print-footer {
        /*Oculta os rodapes de impressão*/
        display: none;
    }

    @media print {
        html, body {
            min-height: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        footer {
            /*some com o rodapé original*/
            display: none;
        }

        div.page div.print-footer {
            /*exibe os rodapés de impressão (que no caso são divs)*/
            display: block;
            position: relative;
            top: 98%;
            margin-top: -2%;
            height: 2%; /*quando ajustar a altura deves ajustar margin-top e o top*/
        }

        div.content {
            /*Ajuda a trabalhar o conteudo com o .print-footer*/
            position: relative;
            background-color: #f00;
            top: 0;
            left: 0;
        }

        div.page {
            /*Força sempre quebrar a página no final*/
            page-break-after: always;
            max-height: 95%;
            height: 95%;
            background-color: #fc0;
        }
    }
    </style>
</head>
<body>
    <div class="page">
        <div class="content">
            <p>Página 1!</p>
        </div>
        <div class="print-footer">Rodapé</div>
    </div>

    <div class="page">
        <div class="content">
            <p>Página 2!</p>
        </div>
        <div class="print-footer">Rodapé</div>
    </div>

    <div class="page">
        <div class="content">
            <p>Página 3!</p>
        </div>
        <div class="print-footer">Rodapé</div>
    </div>

    <footer>
        Rodapé
    </footer>
</body>
</html>