Как установить высоту div на 100% выбранной бумаги?

Как установить высоту на 100% выбранной бумаги?

CSS

width: 100%;
height: 100%;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

Когда я печатаю в Google Chrome, мой печатный div будет только до уровня содержимого в div.
Могу я решить это?
Можно ли сделать div размером с выбранный размер бумаги?

ОТВЕТЫ

Ответ 1

width: 100%;
height:100%;
position:absolute;
top:0px;
bottom:0px;
margin: auto;
margin-top: 0px !important;
border: 1px solid;

также, если позиция абсолютная не будет работать, вы можете сделать то же самое с позицией: исправлено; это будет работать, но может нанести еще больший урон вашему макету, в зависимости от того, как все устроено :)

Я отредактирую это, чтобы сделать его более очевидным, поэтому... если вы используете фиксированную позицию и у вас есть несколько страниц, они просто перейдут один поверх другого, чтобы это было неправильно... но для того, чтобы получите правильный результат с абсолютной позицией, вы должны иметь в виду, что стиль css здесь займет 100% высоты, но высота его родительского... так что если родительский элемент - это тело, просто добавьте html, body{ height:100% };

Ответ 2

Посмотрите на медиа-запросы.

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

Таким образом, вы можете изменять выходные данные, не испортив свой экран

Ответ 3

Если вы добавите разрыв страницы до конца, элемент переместится в нижнюю часть последней страницы. Это особенно полезно, если вы хотите, чтобы нижний колонтитул появился в нижней части последней страницы:

<div style='position:relative;overflow:hidden;background:#ffe!important'>
    <div style='margin-bottom:200px'>
        <p>Content here</p>
    </div>
    <div style='page-break-before:always'></div>
    <div style='position:absolute;bottom:0'>Footer</div>
</div>

Это не даст вам лишнюю пустую страницу - пока у вас нет содержимого после разрыва страницы (абсолютно позиционированный нижний колонтитул не учитывается, если только он не просачивается на вторую страницу). Следите за полями, которые выходят за пределы тела!

Ответ 4

Вы должны сделать свой организм 100%, это должно сработать.

html, body {
    height: 100%;
}

Это нужно сделать, потому что, как вы знаете, ваш контент находится внутри тела. Тело не имеет высоты по умолчанию 100%, поэтому высота bodys будет просто адаптироваться к содержимому внутри себя, если только вы вручную не придадите ему высоту, как показано в примере выше.

Ответ 5

Самым простым способом, который я нашел для этого, было использование блоков Viewport и page-break-after:always. Это хорошо работает для печати нескольких страниц.

Я предлагаю структурировать ваш HTML следующим образом:

<div class="someContainerClass">
  <section id="pageOne"></section>
  <section id="pageTwo"></section>
  <section id="pageThree"></section>
</div>

И используя этот CSS:

section {
  width: 100vw;
  height: 100vh;
  page-break-after: always;
}

Таким образом, вы можете разместить свой контент на той странице, на которой он должен быть.