I'm trying to generate a CSS class that will help me define a "page break".
I know that if I use @media:print .MyDiv{ width:100%; height:100%; }
, I can then set the class of a div
to MyDiv
and it will be -- as best as possible -- 1 page of print.
This is great, but I have encountered a new item that I don't know how to handle, and I'm hoping that something similar can be done. I need to create an empty div
that will stretch itself out 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>
To suggest a page break, add <P style="page-break-before: always"> before the beginning of a new printed page. For example, if you place the following tags on a HTML page and print it using a compatible browser, you will end-up with three pages with the sample text.
page-break-before: auto instead of . page-break-before: always. The "auto" will break the page only if the contents are at the end if the page, this will prevent breaking the page and leaving a lot of blank space. Save this answer.
The page-break-before property adds a page-break before a specified element.. Tip: The properties: page-break-before, page-break-after and page-break-inside help to define how a document should behave when printed. Note: You cannot use this property on an empty <div> or on absolutely positioned elements.
There isn't an actual page-break property in CSS. It is actually a set of 3 properties: page-break-before , page-break-after and page-break-inside . These properties help define how the document is supposed to behave when printed. For example, to make a printed document more book-like.
This is for print, right?
Can't you just use this?
<p style="page-break-before: always"></p>
There are some other options to page-break-before that are worth knowing about too.
In case anyone 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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With