jak uniknąć dodatkowej pustej strony na końcu podczas drukowania?

Question 1

Używam właściwości CSS,

Jeśli użyję page-break-after: always;=> Przed wydrukowaniem dodatkowej pustej strony

Jeśli użyję page-break-before: always;=> Drukuje dodatkową pustą stronę po. Jak tego uniknąć?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

Question 2

Możesz dodać

.print:last-child {
     page-break-after: auto;
}

więc ostatni printelement nie otrzyma dodatkowego podziału strony.

Zwróć uwagę, że selektor: last-child nie jest obsługiwany w IE8, jeśli celujesz w tego łajdaka przeglądarki.

Question 3

Czy próbowałeś tego?

@media print {
    html, body {
        height: 99%;    
    }
}

Question 4

Opisane tutaj rozwiązanie pomogło mi ( link do archiwum internetowego ).

Przede wszystkim możesz dodać obramowanie do wszystkich elementów, aby zobaczyć, co powoduje dołączenie nowej strony (może jakieś marginesy, wypełnienia itp.).

div { border: 1px solid black;}

A samym rozwiązaniem było dodanie następujących stylów:

html, body { height: auto; }

Question 5

jeśli żadne z tych nie działa, spróbuj tego

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

upewnij się, że jest to 100vh

Question 6

To działa dla mnie

.print+.print {
    page-break-before: always;
}

Question 7

Jeśli chcesz używać tylko CSS i chcesz uniknąć łamania strony, użyj

.print{
    page-break-after: avoid;

}

Spójrz na stronicowane media

Możesz użyć odpowiedników skryptów dla pageBreakBefore i pageBreakAfter, dynamicznie przypisując ich wartości. Na przykład zamiast wymuszać niestandardowe podziały stron na odwiedzających, możesz utworzyć skrypt, który sprawi, że będzie to opcjonalne. Tutaj utworzę pole wyboru, które przełącza się między krojeniem strony według nagłówków (h2) i według własnego uznania drukarki (domyślnie):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

Kliknij tutaj, aby zobaczyć przykład, który to wykorzystuje. Możesz zastąpić H2 wewnątrz skryptu innym znacznikiem, takim jak P lub DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Question 8

Nie wiem (na razie) dlaczego, ale ten pomógł:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

Mam nadzieję, że ktoś uratuje mu włosy podczas walki z problemem ...;)

Question 9

Wygląda na to, że istnieje wiele możliwych przyczyn, a prawdopodobnie motywem jest to, że tag body kończy się na wysokości, która jest uważana za zbyt dużą z jakiegoś powodu.

Moja przyczyna: min-height: 100%w podstawowym arkuszu stylów.

Moje rozwiązanie: min-height: autow @media printdyrektywie.

Uwaga, autowedług PhpStorm nie wyglądała na poprawną wartość. Jednak jest to poprawne zgodnie z dokumentacją Mozilli dotyczącą minimalnej wysokości :

auto
Domyślny minimalny rozmiar elementów elastycznych, zapewniający rozsądniejszą wartość domyślną niż 0 dla innych układów.

Question 10

zestaw display:nonena wszystkie pozostałe elementy, które nie są przeznaczone do nadruków. ustawienie visibility:hiddensprawi, że będą one ukryte, ale wszystkie nadal tam są i zajęły dla nich miejsce. pusta strona jest dla tych ukrytych elementów.

Question 11

W moim przypadku pomogło ustawienie szerokości wszystkich div:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Question 12

Zmieniłem wyświetlanie css i właściwość szerokości obszaru drukowania

#printArea{
    display:table;
    width:100%;
}

Rozwiń fragment

Question 13

Miałem podobny problem, ale przyczyną było to, że miałem 40 pikseli marginesu na dole strony, więc ostatni wiersz zawsze był zawijany, nawet jeśli było na niego miejsce na ostatniej stronie. Nie z powodu jakiegokolwiek page-break-*polecenia css. Naprawiłem, usuwając margines na wydruku i działało dobrze. Chciałem tylko dodać moje rozwiązanie na wypadek, gdyby ktoś inny miał coś podobnego!

Question 14

Po zmaganiach z różnymi ustawieniami i wysokościami łamania stron oraz milionem różnych reguł CSS w tagu body, w końcu rozwiązałem to ponad rok później.

Mam element div, który powinien być jedyną drukowaną rzeczą na stronie, ale po nim było kilka pustych stron. Mój tag body jest ustawiony na, visibility:hidden;ale to nie wystarczyło. Elementy strony o wysokości pionowej nadal zajmują „miejsce”. Więc dodałem to w moich regułach CSS drukowania:

#header, #menu, #sidebar{ height:1px; display:none;}

kierować reklamy na określone elementy DIV według ich identyfikatorów, które zawierają wysokie elementy układu strony. Zmniejszyłem wysokość, a następnie usunąłem je z układu. Nigdy więcej pustych stron. Po latach z radością mówię klientowi, że to złamałem. Mam nadzieję, że to komuś pomoże.

Question 15

Wygląda na to, że Chrome ma błąd polegający na tym, że w niektórych sytuacjach ukrywanie elementów po załadowaniu z wyświetlaczem: brak, pozostawia dużo dodatkowej przestrzeni. Wydaje mi się, że obliczają wysokość dokumentu, zanim dokument zostanie ukończony. Chrome uruchamia również 2 zdarzenia zmiany multimediów i nie obsługuje funkcji onbeforeprint, itp. Są one w zasadzie sposobem drukowania. Oto moje obejście:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Dajesz body class = "drukowanie" w dokumencie gotowym, a to włącza style drukowania. System ten pozwala na modularyzację stylów drukowania i podgląd wydruku w przeglądarce.

Question 16

Dodaj ten plik CSS do tej samej strony, aby rozszerzyć plik CSS.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Question 17

Wypróbowałem wszystkie rozwiązania, to działa dla mnie:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Question 18

Właśnie spotkałem się z przypadkiem, w którym zmieniłem się z

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

do

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

naprawiono ten problem.

Question 19

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

To zadziałało dla mnie.

Question 20

Dziwne ustawienie przezroczystej granicy rozwiązało to dla mnie:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Może wystarczy ustawić obramowanie na elemencie kontenera. <- Untestet.

Question 21

Żadna z odpowiedzi nie zadziałała ze mną, ale po przeczytaniu wszystkich zorientowałem się, na czym polega problem w moim przypadku. Mam 1 stronę HTML, którą chcę wydrukować, ale drukowała na niej dodatkową białą pustą stronę. Używam motywu AdminLTE bootstrap 3 do wydrukowania strony raportu i znacznika stopki chciałem umieścić ten tekst w prawym dolnym rogu strony:

Wydrukowane przez Mr. Someone

Użyłem jquery do umieszczenia tego tekstu zamiast poprzedniej stopki „Prawa autorskie” z

$("footer").html("Printed by Mr. Someone");

i domyślnie w motywie stopka znacznika używa klasy .main-footer, która ma atrybuty

padding: 15px;
border-top: 1px solid

spowodowało to dodatkowe białe miejsce, więc po zapoznaniu się z problemem miałem różne opcje, a najlepszą opcją było użycie

$( "footer" ).removeClass( "main-footer" );

Tylko na tej konkretnej stronie

Question 22

Umieść potrzebne rzeczy na stronie w div i użyj podziału strony wewnątrz: unikaj tego div. Twój div pozostanie na jednej stronie i w razie potrzeby przejdzie na drugą lub trzecią stronę, ale następny div, jeśli będzie musiał zrobić podział strony, powinien zaczynać się na następnej stronie.

Question 23

Sprawdź, czy po tagu html na dole jest spacja. Pomogło mi usunąć wszystkie białe spacje poniżej

Answer 1

88

Używam właściwości CSS,

Jeśli użyję page-break-after: always;=> Przed wydrukowaniem dodatkowej pustej strony

Jeśli użyję page-break-before: always;=> Drukuje dodatkową pustą stronę po. Jak tego uniknąć?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

css printing Angelin Nadar
źródło

jaka jest wysokość klasy druku?

juankysmith

1

Ponieważ dotyczy to faktur, wysokość będzie dynamiczna zgodnie z liczbą pozycji.

Angelin Nadar

4

Tak to zrobiliśmy podczas zimnej wojny:<div>This page intentionally left blank.</div>

Bob Stein

Answer 2

jaka jest wysokość klasy druku?

juankysmith

Answer 3

1

Ponieważ dotyczy to faktur, wysokość będzie dynamiczna zgodnie z liczbą pozycji.

Angelin Nadar

Answer 4

4

Tak to zrobiliśmy podczas zimnej wojny:<div>This page intentionally left blank.</div>

Bob Stein

Answer 5

72

Możesz dodać

.print:last-child {
     page-break-after: auto;
}

więc ostatni printelement nie otrzyma dodatkowego podziału strony.

Zwróć uwagę, że selektor: last-child nie jest obsługiwany w IE8, jeśli celujesz w tego łajdaka przeglądarki.

AKX
źródło

88

Jest ok, ponieważ „Nieobsługiwane w IE” jest domyślną funkcją IE

Angelin Nadar

Dla innych czytelników to nie zadziałało, ale poniższa odpowiedź dotycząca ustawiania automatycznej wysokości w HTML i elementach ciała działała jak urok.

Cody

Answer 6

88

Jest ok, ponieważ „Nieobsługiwane w IE” jest domyślną funkcją IE

Angelin Nadar

Answer 7

Dla innych czytelników to nie zadziałało, ale poniższa odpowiedź dotycząca ustawiania automatycznej wysokości w HTML i elementach ciała działała jak urok.

Cody

Answer 8

101

Czy próbowałeś tego?

@media print {
    html, body {
        height: 99%;    
    }
}

giannis.epp
źródło

2

U mnie pracował: @media print {html {wysokość: 99%; }}, z treścią utworzonego dokumentu był większy

Gustavo

10

W moim przypadku Zurb Foundation ustawiała html i body na height: 100%. Udało mi się to zmienićheight: auto

zacharydl

4

Potwierdzam, że komentarz @ zacharydl działa dla mnie, a także że height: auto;jest bardziej elegancki niżheight: 99%;

jontsai

Miałem ten problem, ponieważ ustawiałem wysokość html na 101%, aby wymusić wyświetlanie paska przewijania. (Eliminuje przeskakiwanie między stronami) - więc tak, 100% wysokości w stylu druku to smaczna poprawka! - Twoje zdrowie.

rob_james

@rob_james, aby uniknąć używania 101%, możesz ustawić overflow-y: scroll; aby pasek przewijania był zawsze widoczny

user161592

Answer 9

2

U mnie pracował: @media print {html {wysokość: 99%; }}, z treścią utworzonego dokumentu był większy

Gustavo

Answer 10

10

W moim przypadku Zurb Foundation ustawiała html i body na height: 100%. Udało mi się to zmienićheight: auto

zacharydl

Answer 11

4

Potwierdzam, że komentarz @ zacharydl działa dla mnie, a także że height: auto;jest bardziej elegancki niżheight: 99%;

jontsai

Answer 12

Miałem ten problem, ponieważ ustawiałem wysokość html na 101%, aby wymusić wyświetlanie paska przewijania. (Eliminuje przeskakiwanie między stronami) - więc tak, 100% wysokości w stylu druku to smaczna poprawka! - Twoje zdrowie.

rob_james

Answer 13

@rob_james, aby uniknąć używania 101%, możesz ustawić overflow-y: scroll; aby pasek przewijania był zawsze widoczny

user161592

Answer 14

46

Opisane tutaj rozwiązanie pomogło mi ( link do archiwum internetowego ).

Przede wszystkim możesz dodać obramowanie do wszystkich elementów, aby zobaczyć, co powoduje dołączenie nowej strony (może jakieś marginesy, wypełnienia itp.).

div { border: 1px solid black;}

A samym rozwiązaniem było dodanie następujących stylów:

html, body { height: auto; }

Michael Radionov
źródło

9

Wow, to był mój stary blog! Miałem ten sam problem i myślałem, że już raz naprawiłem ten mały świat ^^ mały świat

Miguel Stevens

3

plus 1 za dodanie obramowania div.

Iftikhar Ali Ansari

Dodanie granicy to świetny pomysł !! Pomogło mi to zdać sobie sprawę, że w opakowaniu strony ustawiono minimalną wysokość, która powodowała pojawienie się dodatkowej strony. Przez chwilę waliłem w to głową. Dziękuję bardzo!

erichunt

Answer 15

9

Wow, to był mój stary blog! Miałem ten sam problem i myślałem, że już raz naprawiłem ten mały świat ^^ mały świat

Miguel Stevens

Answer 16

3

plus 1 za dodanie obramowania div.

Iftikhar Ali Ansari

Answer 17

Dodanie granicy to świetny pomysł !! Pomogło mi to zdać sobie sprawę, że w opakowaniu strony ustawiono minimalną wysokość, która powodowała pojawienie się dodatkowej strony. Przez chwilę waliłem w to głową. Dziękuję bardzo!

erichunt

Answer 18

33

jeśli żadne z tych nie działa, spróbuj tego

@media print {

    html, body {
      height:100vh; 
      margin: 0 !important; 
      padding: 0 !important;
      overflow: hidden;
    }

}

upewnij się, że jest to 100vh

Bryan Chan
źródło

4

ustawienie wysokości na 100 vh rozwiązało mój problem. Dzięki

user2398069

1

„@media print {* {overflow: hidden! important;}}” jest dla mnie bardzo ważne.

shinriyo

1

Wreszcie odpowiedź na niejasny problem! Safari na OSX pokazywało zupełnie pustą stronę, podczas gdy Chrome, FF i Edge były w porządku z podglądem. Wielkie dzięki!

pop

Ustawienie wysokości 100vh wydaje się powstrzymywać ładowanie więcej niż jednej strony, więc jeśli dokument ma więcej niż jedną stronę, tylko pierwsza strona jest ładowana na podglądzie

Filipe

Answer 19

4

ustawienie wysokości na 100 vh rozwiązało mój problem. Dzięki

user2398069

Answer 20

1

„@media print {* {overflow: hidden! important;}}” jest dla mnie bardzo ważne.

shinriyo

Answer 21

1

Wreszcie odpowiedź na niejasny problem! Safari na OSX pokazywało zupełnie pustą stronę, podczas gdy Chrome, FF i Edge były w porządku z podglądem. Wielkie dzięki!

pop

Answer 22

Ustawienie wysokości 100vh wydaje się powstrzymywać ładowanie więcej niż jednej strony, więc jeśli dokument ma więcej niż jedną stronę, tylko pierwsza strona jest ładowana na podglądzie

Filipe

Answer 23

8

To działa dla mnie

.print+.print {
    page-break-before: always;
}

Chłostać
źródło

To działało lepiej niż reszta! Więcej informacji tutaj: blog.jonesed.net/2012/10/…

RemarkLima

Answer 24

To działało lepiej niż reszta! Więcej informacji tutaj: blog.jonesed.net/2012/10/…

RemarkLima

Answer 25

Jeśli chcesz używać tylko CSS i chcesz uniknąć łamania strony, użyj

.print{
    page-break-after: avoid;

}

Spójrz na stronicowane media

Możesz użyć odpowiedników skryptów dla pageBreakBefore i pageBreakAfter, dynamicznie przypisując ich wartości. Na przykład zamiast wymuszać niestandardowe podziały stron na odwiedzających, możesz utworzyć skrypt, który sprawi, że będzie to opcjonalne. Tutaj utworzę pole wyboru, które przełącza się między krojeniem strony według nagłówków (h2) i według własnego uznania drukarki (domyślnie):

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

Kliknij tutaj, aby zobaczyć przykład, który to wykorzystuje. Możesz zastąpić H2 wewnątrz skryptu innym znacznikiem, takim jak P lub DIV.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

Answer 26

Nie wiem (na razie) dlaczego, ale ten pomógł:

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

Mam nadzieję, że ktoś uratuje mu włosy podczas walki z problemem ...;)

Answer 27

4

Wygląda na to, że istnieje wiele możliwych przyczyn, a prawdopodobnie motywem jest to, że tag body kończy się na wysokości, która jest uważana za zbyt dużą z jakiegoś powodu.

Moja przyczyna: min-height: 100%w podstawowym arkuszu stylów.

Moje rozwiązanie: min-height: autow @media printdyrektywie.

Uwaga, autowedług PhpStorm nie wyglądała na poprawną wartość. Jednak jest to poprawne zgodnie z dokumentacją Mozilli dotyczącą minimalnej wysokości :

auto
Domyślny minimalny rozmiar elementów elastycznych, zapewniający rozsądniejszą wartość domyślną niż 0 dla innych układów.

George Marian
źródło

Po prostu wstawiłem „min-height: początkowe! Ważne;” i to zadziałało dla mnie.

Siby Thomas,

@SibyThomas Jeśli to możliwe, unikam! Ważnej deklaracji. Utrudnia to zastępowanie właściwości. Nawet się nie zastanawiałem, initialponieważ zakładałem, że będzie to problematyczne dla elementów o dynamicznych rozmiarach. Zauważ, że początkowa wartość to 0, więc nadal zakładam, że autojest to ogólnie bardziej przydatne.

George Marian

Answer 28

Po prostu wstawiłem „min-height: początkowe! Ważne;” i to zadziałało dla mnie.

Siby Thomas,

Answer 29

@SibyThomas Jeśli to możliwe, unikam! Ważnej deklaracji. Utrudnia to zastępowanie właściwości. Nawet się nie zastanawiałem, initialponieważ zakładałem, że będzie to problematyczne dla elementów o dynamicznych rozmiarach. Zauważ, że początkowa wartość to 0, więc nadal zakładam, że autojest to ogólnie bardziej przydatne.

George Marian

Answer 30

zestaw display:nonena wszystkie pozostałe elementy, które nie są przeznaczone do nadruków. ustawienie visibility:hiddensprawi, że będą one ukryte, ale wszystkie nadal tam są i zajęły dla nich miejsce. pusta strona jest dla tych ukrytych elementów.

Answer 31

3

W moim przypadku pomogło ustawienie szerokości wszystkich div:

.page-content div {
    width: auto !important;
    max-width: 99%;
}

Marjanus
źródło

Answer 32

Zmieniłem wyświetlanie css i właściwość szerokości obszaru drukowania

#printArea{
    display:table;
    width:100%;
}

Rozwiń fragment

Answer 33

Miałem podobny problem, ale przyczyną było to, że miałem 40 pikseli marginesu na dole strony, więc ostatni wiersz zawsze był zawijany, nawet jeśli było na niego miejsce na ostatniej stronie. Nie z powodu jakiegokolwiek page-break-*polecenia css. Naprawiłem, usuwając margines na wydruku i działało dobrze. Chciałem tylko dodać moje rozwiązanie na wypadek, gdyby ktoś inny miał coś podobnego!

Answer 34

Po zmaganiach z różnymi ustawieniami i wysokościami łamania stron oraz milionem różnych reguł CSS w tagu body, w końcu rozwiązałem to ponad rok później.

Mam element div, który powinien być jedyną drukowaną rzeczą na stronie, ale po nim było kilka pustych stron. Mój tag body jest ustawiony na, visibility:hidden;ale to nie wystarczyło. Elementy strony o wysokości pionowej nadal zajmują „miejsce”. Więc dodałem to w moich regułach CSS drukowania:

#header, #menu, #sidebar{ height:1px; display:none;}

kierować reklamy na określone elementy DIV według ich identyfikatorów, które zawierają wysokie elementy układu strony. Zmniejszyłem wysokość, a następnie usunąłem je z układu. Nigdy więcej pustych stron. Po latach z radością mówię klientowi, że to złamałem. Mam nadzieję, że to komuś pomoże.

Answer 35

Tak, jeśli visibility: hidden;go używasz , nadal będzie zajmować miejsce. Jeśli użyjesz display: none;miejsca, zostanie usunięte. W tym momencie nie musisz specjalnie ustawiać wysokości, po prostu FYI.

chapeljuice

Answer 36

Wygląda na to, że Chrome ma błąd polegający na tym, że w niektórych sytuacjach ukrywanie elementów po załadowaniu z wyświetlaczem: brak, pozostawia dużo dodatkowej przestrzeni. Wydaje mi się, że obliczają wysokość dokumentu, zanim dokument zostanie ukończony. Chrome uruchamia również 2 zdarzenia zmiany multimediów i nie obsługuje funkcji onbeforeprint, itp. Są one w zasadzie sposobem drukowania. Oto moje obejście:

@media print {
    body {
        display: none;
    }
}

body.printing {
    display: block;
}

Dajesz body class = "drukowanie" w dokumencie gotowym, a to włącza style drukowania. System ten pozwala na modularyzację stylów drukowania i podgląd wydruku w przeglądarce.

Answer 37

Dodaj ten plik CSS do tej samej strony, aby rozszerzyć plik CSS.

<style type="text/css">
   <!--
   html, body {
    height: 95%; 
    margin: 0 0 0 0;
     }
   -->
</style>

Answer 38

Wypróbowałem wszystkie rozwiązania, to działa dla mnie:

<style>
    @page {
        size: A4;
        margin: 1cm;
    }

    .print {
        display: none;
    }

    @media print {
        div.fix-break-print-page {
            page-break-inside: avoid;
        }

        .print {
            display: block;
        }
    }

    .print:last-child {
        page-break-after: auto;
    }
</style>

Answer 39

Właśnie spotkałem się z przypadkiem, w którym zmieniłem się z

    </div>
    <script src="addressofjavascriptfile.js"></script>
</body>
</html>

do

        <script src="addressofjavascriptfile.js"></script>
    </div>
</body>
</html>

naprawiono ten problem.

Answer 40

1

.print:last-child{
    page-break-after: avoid;
    page-break-inside: avoid;
    margin-bottom: 0px;
}

To zadziałało dla mnie.

Gość
źródło

Answer 41

Dziwne ustawienie przezroczystej granicy rozwiązało to dla mnie:

@media print {
  div {
    border: 1px solid rgba(0,0,0,0)
  }
}

Może wystarczy ustawić obramowanie na elemencie kontenera. <- Untestet.

Answer 42

Żadna z odpowiedzi nie zadziałała ze mną, ale po przeczytaniu wszystkich zorientowałem się, na czym polega problem w moim przypadku. Mam 1 stronę HTML, którą chcę wydrukować, ale drukowała na niej dodatkową białą pustą stronę. Używam motywu AdminLTE bootstrap 3 do wydrukowania strony raportu i znacznika stopki chciałem umieścić ten tekst w prawym dolnym rogu strony:

Wydrukowane przez Mr. Someone

Użyłem jquery do umieszczenia tego tekstu zamiast poprzedniej stopki „Prawa autorskie” z

$("footer").html("Printed by Mr. Someone");

i domyślnie w motywie stopka znacznika używa klasy .main-footer, która ma atrybuty

padding: 15px;
border-top: 1px solid

spowodowało to dodatkowe białe miejsce, więc po zapoznaniu się z problemem miałem różne opcje, a najlepszą opcją było użycie

$( "footer" ).removeClass( "main-footer" );

Tylko na tej konkretnej stronie

Answer 43

Umieść potrzebne rzeczy na stronie w div i użyj podziału strony wewnątrz: unikaj tego div. Twój div pozostanie na jednej stronie i w razie potrzeby przejdzie na drugą lub trzecią stronę, ale następny div, jeśli będzie musiał zrobić podział strony, powinien zaczynać się na następnej stronie.

Answer 44

0

Sprawdź, czy po tagu html na dole jest spacja. Pomogło mi usunąć wszystkie białe spacje poniżej

Wahsei
źródło

jak uniknąć dodatkowej pustej strony na końcu podczas drukowania?

Odpowiedzi: