Geek Answers Handbook

Content overlaps on footer when previewing page

I am trying to implement some code that will create headers and footers on all my web pages, but the content overlaps on the footer.

My stylesheet:

<style> @media print { #Header { display: block; position: fixed; top: 0pt; left: 0pt; right: 0pt; font-size: 200%; } #Footer { display: block; position: fixed; bottom: 0pt; left: 0pt; right: 0pt; font-size: 200%; page-break-before: always; } #form { display: block; position: relative; top: 0.5in; left: 0pt; bottom: 0.5in; right: 0pt; } } </style>

My title, content and div footer in the content insert more A4 lines to break the page in the preview.

  <div class="wordcontent"> <div class="" style="height: 0.5in;" contenteditable="true" id="Header"> HEADER </div> <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> content more then 500 lines </div> <div class="" style="height: 0.5in; margin-top: 5px;" contenteditable="true" id="Footer"> FOOTER </div> </div>

Thanks in advance.

+5
source share
1 answer

It’s better to change the page break to content because you are going to change the content and the footer will be fixed and page breaks after each content and new page content follow the top property to fall below the header

here is the pen code link

  @media print { #Header { display: block; position: fixed; top: 0pt; left: 0pt; right: 0pt; font-size: 200%; } #Footer { display: block; position: fixed; bottom: 0pt; left: 0pt; right: 0pt; font-size: 200%; } #form { display: block; position: relative; top: 0.5in; left: 0pt; bottom: 0.5in; right: 0pt; page-break-after: always; } } 
  <div class="wordcontent"> <div class="" style="height: 0.5in;" contenteditable="true" id="Header"> HEADER </div> <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> content more then 500 lines </div> <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> content more then 500 lines </div> <div id="form" name="formDiv" contenteditable="true" style="min-height: 10in;"> content more then 500 lines </div> <div class="" style="height: 0.5in; margin-top: 5px;" contenteditable="true" id="Footer"> FOOTER </div> </div>
0
source

More articles:


All Articles