Geek Answers Handbook

How to emulate page break using CSS and HTML?

I am trying to create a CSS class that will help me define a "page break".

I know that if I use @media:print .MyDiv{ width:100%; height:100%; } @media:print .MyDiv{ width:100%; height:100%; } @media:print .MyDiv{ width:100%; height:100%; } , then I can set the div class to MyDiv , and it will - as best as possible - 1 print page. A.

This is great, but I came across a new element that I do not know how to handle, and I hope that something like this can be done. I need to create an empty div that will stretch to the "end of the page".

Something like:

 <style type="text/css"> @media print .PageBreak { width: 100%; height: *; /* space left on current page */ } @media screen .PageBreak { border-bottom: 1px solid black; } </style> <!-- ... --> <div>This should appear on the first page.</div> <div class="PageBreak"><!-- This DIV should stretch itself out so that the next piece of content appears on the next page (only when printing). --></div> <div>This should appear on the second page.</div>

+6
css
source share
4 answers

This is for printing, right?

Can't you use this?

 <p style="page-break-before: always"></p>

There are other page-break-before options that you should be aware of.

+15
source share

If someone is interested in the solution I used:

 <style type="text/css"> @media print { .PageBreak { page-break-before: always; } } @media screen { .PageBreak { border-bottom: 1px dashed black; width: 100%; margin-bottom: 12px; } } </style>

So simple. Thanks Mark and Mark .

+3
source share

Sorry if I missed something, but there is a reason why you cannot use the default breakdown in css.

Specifying Page Breaks for Printing Using CSS

+1
source share

If your html is sent as an attachment, and if the user views the file using gmail, gmail removes any css rule that has a page break property rule.

0
source share

More articles:


All Articles