видеть странное поведение при попытке установить body.margin css

Question

Я пытаюсь скрыть верхний и нижний колонтитулы на странице при печати с Chrome на Ма c. Верхний и нижний колонтитулы не отображаются по умолчанию через Chrome на Windows. Основываясь на базовом c Google, похоже, что я должен установить для поля поля значение 0 следующим образом:

  @page {
    margin:0;
  }

Затем настройте свойство margin в определении тела @media print следующим образом:

  body {
     margin:20px;
  }

Хотя у меня странное поведение. Установка свойства, как указано выше, ничего не делает. Установка свойства, подобного этому, только изменяет верхнее поле:

  body {
    margin: 20px auto !important;
  }

Я также попытался установить каждое поле явно следующим образом:

  body {
    margin: 20px auto !important;
    margin-bottom: 20px auto !important;
    margin-left: 20px auto !important;
    margin-right: 20px auto !important;
  }

Однако использование этого подхода также только меняет верхнее поле. Правильно ли я установил @page {margin: 0}, чтобы исключить верхний и нижний колонтитулы из распечатки? Что мне нужно сделать, чтобы правильно установить поля в теле, как я пытаюсь сделать в приведенных выше примерах? Или есть лучший способ?

Answer 1

Хитрость для отключения определенных c элементов от печати состоит в том, чтобы явно скрыть их в определении @ media print css.

Вот css код для скрытия панели навигации, нижнего колонтитула, фона и теней от печати:

@media print {
  .navbar {
    display: none;
  }
  .footer-section {
    display: none;
  }
  * {
    text-shadow: none !important;
    color: #000 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
}

В приведенном выше примере для текста также устанавливается цвет черный .

Answer 2

Лично я бы посоветовал просто полностью удалить их с экрана дисплея с помощью простого медиазапроса;

/* Where the magic happens */

@media print { 
  #header, #footer { display: none !important; } 
}

#header {
  padding: 1rem;
  background-color: #00f;
  display: block;
}

main {
  background-color: #0f0;
  padding: 5rem;
}

#footer {
  padding: 1rem;
  background-color: #f00;
}

<header id="header">
 <h1>Header (will not be in print version)</h1>
</header>

<main>
  <p>The main body of stuff whatever it might be...</p>
</main>

<div id="footer">
  <strong>Footer (will not be in print version)</strong>
</div>