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

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

<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?

источник

2011-01-27 Dziamid

Вы можете распечатать только div, который вы хотите, следуя статье! http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168

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

источник

2011-02-17 00:04:27 Dziamid

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

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

Это хорошая практика, чтобы использовать таблицу стилей, в частности, для печати, а также и установить его атрибут СМИ print.

Пример:

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

источник

2011-01-27 13:33:09 Sarfraz

Обязательно добавьте раздел печати после того, как были указаны все другие разделы стилей. Таким образом, распечатываемые заявления будут переопределять другие стили во время печати. – Mike

вопрос сказал: 'ищет простой способ скрыть все, кроме определенного div' – Pooya

Это должен быть принятый ответ. Это самый гибкий из всех других ответов и не включает использование JS или использование какого-либо JS-плагина для ручного отображения скрытых элементов. – TinkerTenorSoftwareGuy

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

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

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

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

источник

2011-01-27 13:33:54 Tr1stan

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

.classHide{display: none}

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

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

источник

2011-01-27 13:40:40 Thiago

Как вы собираетесь говорить об этом только при печати, используя что-либо, кроме CSS? – BoltClock

Вы используете только html + css? – Thiago

Я хочу сказать, что вы не можете использовать серверный язык, чтобы указать стили только для применения при печати. Это происходит потому, что печать происходит на стороне клиента, поэтому сервер ничего не знает. – BoltClock

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

body > div { 
    display: none; 
} 

#content { 
    display: block; 
}

источник

2011-01-27 14:03:05 RoToRa

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

ответ

Смежные вопросы