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

Im ищет простой способ скрыть все, кроме определенного 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?

Ответ 1

Я сделал это 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.

Ответ 2

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

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

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

Пример:

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

Ответ 3

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

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

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

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

Ответ 4

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

.classHide{display: none}

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

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

Ответ 5

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

body > div {
   display: none;
}

#content {
  display: block;
}