Используйте CSS, чтобы скрыть содержимое при печати - PullRequest
Новая
       4

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

10 голосов
/ 27 января 2011

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

Ответы [ 5 ]

28 голосов
/ 27 января 2011 
@media print {
.noPrint {
    display:none;
  }
}

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

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

Пример: 

<link rel="stylesheet" type="text/css" href="print.css" media="print" />
7 голосов
/ 17 февраля 2011

Я сделал это 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 голосов
/ 27 января 2011

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

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

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

.header, .menu, .footer { display: none; }
0 голосов
/ 27 января 2011

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

body > div {
   display: none;
}

#content {
  display: block;
}
0 голосов
/ 27 января 2011

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

.classHide{display: none}

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

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

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

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

...