2011-01-27 17 views
10

特定のdivとその内容以外のすべてを隠す簡単な方法を探しています。CSSを使って印刷物の内容を隠す

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

を、レイアウトが複雑であれば、それは乱雑になり:

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

ので、例えば、私は唯一のdiv.contentを印刷したい場合は、私はこのようにそれを行うだろう。 CSSでこれを行う簡単な方法はありますか?

+0

記事の後に、必要なdivだけを印刷することができます。 http://stackoverflow.com/questions/2255291/print-the-contents-of-a-div – BillDo168

答えて

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の将来の変更に注意を払うので、ここでは非常に効率的ではありません。

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

印刷時に非表示にしたい要素にクラスnoPrintを適用する必要があります。


特に印刷用のスタイルシートを使用することをお勧めします、そして、それはprintへのメディア属性の設定。

例:

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

他のすべてのスタイルセクションが指定されたら、必ず印刷セクションを追加してください。そうすれば、printステートメントは印刷時に他のスタイルを上書きします。 – Mike

+0

質問:「特定のdiv以外のすべてを隠す簡単な方法を探して」 – Pooya

+0

これは受け入れられる回答である必要があります。これは、他のすべての回答の中で最も柔軟性があり、JSの使用やJSプラグインを使用して要素を手動で表示/非表示することは含まれません。 – TinkerTenorSoftwareGuy

6

Webページを印刷するときの動作を定義する個別のCSSファイルを割り当てます。

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

し、そのファイル内でだけ定義:

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

あなたはクラスを使用することができます。

.classHide{display: none} 

使用する言語によっては、== trueの場合、ヘッダー、メニュー、フッターにクラスを追加できます。

他のCSSファイルを使用する必要はありません。

+0

CSS以外のものを使って印刷するときに、これらを非表示にする方法を教えてください。 – BoltClock

+0

あなたはhtml + cssのみを使用していますか? – Thiago

+1

私が指摘しておきたいことは、印刷時にのみスタイルを適用するためにサーバー側言語を使用することができないということです。これは、印刷がクライアント側で行われるため、サーバーは何も知らないためです。 – BoltClock

0

(とブラウザIE6はこれをサポートしていますので、あなたが、サポートする必要がある)、あなたはすべてのトップレベルのdivを隠し、わずか数1 /を表示したい示すことができ、あなたのHTMLの構造によって:

body > div { 
    display: none; 
} 

#content { 
    display: block; 
} 
関連する問題