Поместите div в абсолютную позицию внутри области печати медиа

0

Мне нужно напечатать страницу с фиксированным размером и абсолютную позицию div внутри:

.page 
{
    width: 21cm;
    min-height: 29.7cm;
    padding: 1.2cm;
    margin: 1cm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
    position: relative;
}

Медиа-классы для печати:

@page 
{
    size: A4;
    margin: 0; 
}

@media print {
   .page {
    margin: 0;
    border: initial;
    border-radius: initial;
    width: initial;
    min-height: initial;
    box-shadow: initial;
    background: initial;
    page-break-after: always;
    position: relative;
  }
}

Div:

<div id="proc_comp">Printed by Computer</div>

#proc_comp
{
   position: absolute;
   left: 190px;
   bottom: 15px;
   font-size: 0.65em;
}

Но div, когда я пытаюсь выполнить печать в браузере, он не отображается в том же месте, что и макет HTML, почему?

Благодарю.

Теги:

1 ответ

0

Неправильное позиционирование появляется из-за того, что вы используете размещение на основе пикселей внутри правила #proc_comp тогда как страница использует формат А4 (#proc_comp компоновка). Вы можете попытаться использовать следующую альтернативу

#proc_comp {
  position: absolute;
  left: 50%;
  top: 50px;
  margin-left: -5em;
  margin-top: -1em;
}

Возможно, вам придется играть с отрицательными полями, чтобы они соответствовали высоте и ширине отображаемого сообщения, чтобы оно выглядело по центру.

Поделиться
  • 0
    Привет спасибо, может быть, я могу использовать размер страницы в px?
  • 0
    @ Патрик Я бы никогда не смешал размеры в пикселях и печати, потому что есть некоторые непредсказуемые факторы, такие как настройки dpi, и такие, которые могут повлиять на расчеты. Попробуйте использовать «pt» вместо «px», как я это делал в jsFiddle: jsfiddle.net/Moonbird_IT/N5S5A (используйте «Print» в нижней правой панели, чтобы увидеть расположение).
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню