How to fix footer on the print page?

Asked

Viewed 4,057 times

1

I need to leave some information on the footer of the page.

How should I do it?

Below, follow the full code I’m using, but it’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 impression

  • Use Stacksnipet only to play "executable" code like js, html, css. If the code does nothing (in this case by using PHP) then don’t use p Stacksnipet. About the doubt I have not found solution that can change the footer of the print, but I will try something that is the closest. Namastê!

1 answer

3

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

A printing 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.

Multi-page footer:

Note that I used .footer to create the footers that should only appear in the print and the footer (no point) for the version viewed on 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>

  • Thank you, my comrade! You are a sensational guy and excellent advisor. I will take the test and return here, to confirm the success of the operation. A hug. Namaste!

  • @Kali Opa! Thank you, I hope this helps with your project, comment here if something fails, tomorrow night I’m back! Good rest of Sunday.

  • Placed conforma below, but on the print page it does not load what is inside the footer. What may be wrong?

  • Jeez! Picking up here, to understand the stackoverflow system. I put Cod inside ' ', but it wasn’t.

  • @Kali use this bet `

Browser other questions tagged html css impression

You are not signed in. Login or sign up in order to post.