印刷メディアのクエリに何も表示されないのはなぜですか？

Question

私は、ヘッダー、フッターまたは背景が見えずに印刷する必要のあるWebサイトを持っています。フッターとコンテナの背景については、これはうまく動作しますが、ヘッダーコンテナを非表示にする方法はわかりません。

マイHTML：

<div id=header> 
    <div id=logoContainer> 
      <a href="mainPage.php"><img id=logo src="xxx.png"></img></a> 
     <div id=pageTitle> 
     <h1 id=pageTitleText>TITLE</h1> 
     </div> 
     <div id=headerUserInfo> 
     <span>Logged in as: <?php echo $_SESSION['login_user']; ?> | </span><a class=logout href="logout.php">Logout</a> 
     </div> 
    </div> 
    </div> 

CSS：

#header { 
height:90px; 
background:url("images/header.png") repeat-x scroll 0 0 #2d3133;} 

@media print { 
     #header { 
     display: none !important; 
     } 
} 

クロームインスペクタを開き、@media印刷ルールがまったくヘッダーに表示されないヘッダコンテナを選択します。 （レンダリングはChromeでプリントをエミュレートするように設定されています）フッターなどのコンテナはヘッダーのようにうまく機能します。

私はここで何が欠けていますか？

EDIT：作業例：

HTML：

<div id="tableContainer"> 

    <div class="buttonsDiv"> 
    <a href="new.php" class="mainButton">Button 1</a> 
    <a class="mainButton">Button 2</a> 
    <a class="mainButton">Button 3/a> 
    </div> 
</div> 

CSS：

@media print { 
     #header { 
     display: none !important; 
     } 
     #footer { 
     display: none; 
     } 
     #tableContainer { 
     background: transparent !important; 
     } 

Answer 1

使用" ID <div id="header">

#header { 
 
height:90px; 
 
background:url("images/header.png") repeat-x scroll 0 0 #2d3133;} 
 

 
@media print { 
 
     #header { 
 
     display: none !important; 
 
     } 
 
}

<div id="header"> 
 
    <div id=logoContainer> 
 
      <a href="mainPage.php"><img id=logo src="xxx.png"></img></a> 
 
     <div id=pageTitle> 
 
     <h1 id=pageTitleText>TITLE</h1> 
 
     </div> 
 
     <div id=headerUserInfo> 
 
     <span>Logged in as: <?php echo $_SESSION['login_user']; ?> | </span><a class=logout href="logout.php">Logout</a> 
 
     </div> 
 
    </div> 
 
    </div>

を定義します