Используйте CSS для скрытия содержимого при печати

Я ищу простой способ скрыть все, кроме определенного div и его содержимого.

<html>
  <head></head>
  <body>
    <div class="header">...</div>
    <div class="menu">...</div>
    <div class="content">...</div>
    <div class="footer">...</div>
  </body>.
</html>

Так, например, если я хочу напечатать только div.content, Я бы сделал это так:

.header, .menu, .footer {
  display: none;
}

и если макет сложный, он становится грязным. Есть ли более простой способ сделать это с помощью CSS?

10
css printing

5 ответов

@media print {
.noPrint {
    display:none;
  }
}

теперь вам нужно применить класс noPrint к элементам, которые вы хотите скрыть при печати.

рекомендуется использовать таблицу стилей специально для печати, а также установить ее атрибут media в print.

пример:

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
27

назначьте отдельный файл CSS, который определяет поведение при печати веб-страницы.

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

и затем в этом файле просто определите:

.header, .menu, .footer { display: none; }
6

Я сделал это css3 способом: используя не псевдокласс, а прямые предки (дети)

/* hide all children of body that are not #container */
body > *:not(#container) {
  display: none;
}
/* hide all children of #container that are not #content */
#container > *:not(#content) {
  display: none;
}
/* and so on, until you reach a div that you want to print */
#content > *:not(#print_me) {
  display: none;
}

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

6

вы можете использовать классы.

.classHide{display: none}

в зависимости от используемого языка, когда if= = true вы можете добавить класс в верхний, нижний и Нижний колонтитулы.

поэтому вам не нужно будет использовать другой файл css.

0

в зависимости от вашей структуры HTML (и браузеров, которые вам нужно поддерживать, потому что IE6 не будет поддерживать это), вы можете скрыть все дивы верхнего уровня и просто показать один / несколько, которые вы хотите показать:

body > div {
   display: none;
}

#content {
  display: block;
}
0