Печать нижнего колонтитула внизу страницы в сафари - PullRequest
Новая
       10

Печать нижнего колонтитула внизу страницы в сафари

5 голосов
/ 21 сентября 2010

Я пытаюсь расположить элемент div (нижний колонтитул) внизу печатной страницы . В Firefox это работает нормально, и div будет располагаться вдоль нижней части печатной страницы.

Однако в Safari нижний колонтитул перемещается вверх по напечатанной странице , если окно браузера не очень высокое. например. если окно браузера имеет высоту 200 пикселей, то нижний колонтитул распечатывается примерно на 200 пикселей вниз. Если браузер имеет высоту 400px, он выводит нижний колонтитул на 400px вниз по странице.

Я бы хотел получить такое же поведение в Safari, как и в Firefox, если это возможно?

Основной код, который я использую для этого: 

<html>
    <head>
        <title>Print footer at bottom of a printed page</title>
        <style type="text/css">
            * { margin:0; padding:0; }
            html, body { height: 100% !important; }
            #footer { height:25px; border-top:solid 1px #000;
                      position:absolute; bottom:0; }
        </style>
    </head>
    <body>
        <p>Some content on the page here</p>
        <div id="footer">This should appear at the very bottom of the printed page</div>    
    </body>
</html>

Редактировать: Я счастлив, если решение требует взлома ... оно должно работать только в Safari

Ответы [ 3 ]

9 голосов
/ 21 сентября 2010

Я только что распечатал это в Chrome (тот же движок рендеринга, что и Safari), и строка показала внизу ... 

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Testing</title> 
    <style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
    </style> 
  </head> 
  <body> 
    <div id="footer"> 
      This will always print at the bottom
    </div> 
  </body> 
</html>

Обратите внимание, что у меня есть media="print" на теге style.Подробнее об этом читайте Переход к печати в ALA.

3 голосов
/ 15 августа 2012

Это код, который я использую.Примечание. Я устанавливаю html и рост в 100%, что необходимо для Chrome и Safari. 

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}
0 голосов
/ 21 сентября 2010

Вы пробовали эту версию?

http://www.themaninblue.com/experiment/footerStickAlt/

Я знаю, что это работает в браузерах, но не уверен насчет печати. ​​

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...