title: Remove Header and footer using print media CSS
body: <p>when I'm printing my page using window.print ,Its automatically adding some data's in header and footer </p>
  
  <p>for ex: In top of the page its adding - page tittle and localhost url . In bottom of the page adding - page number and time . How can I get rid of these information from my page </p>
  
  <p>My Html Page:</p>
  
  <p>
  
    
      
        
    
          </p>
  
  
  
  
  
  
  
  <pre><code>&lt;title&gt;GM Shop Click Drive Tracker Tool - Reports&lt;/title&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
  &lt;meta name="description" content=""&gt;
  &lt;meta name="author" content=""&gt;
  &lt;link href="css/bootstrap.css" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="css/jquery-ui-1.10.3.custom.css" media="screen"/&gt;
  &lt;style&gt;
    body {
      padding-top: 6px; /* 60px to make the container go all the way to the bottom of the topbar */
    }
  &lt;/style&gt;
  &lt;link href="css/bootstrap-responsive.css" rel="stylesheet"&gt;
  &lt;link href="css/gmpt.css" rel="stylesheet"&gt;
  &lt;link href="css/style.css" rel="stylesheet"&gt;
  
  &lt;!-- HTML5 shim, for IE6-8 support of HTML5 elements --&gt;
  &lt;!--[if lt IE 9]&gt;
    &lt;script src="js/html5shiv.js"&gt;&lt;/script&gt;
  &lt;![endif]--&gt;
  
  &lt;!-- Fav and touch icons --&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="144x144" href="ico/apple-touch-icon-144-precomposed.png"&gt;
  &lt;link rel="apple-touch-icon-precomposed" sizes="114x114" href="ico/apple-touch-icon-114-precomposed.png"&gt;
    &lt;link rel="apple-touch-icon-precomposed" sizes="72x72" href="ico/apple-touch-icon-72-precomposed.png"&gt;
                  &lt;link rel="apple-touch-icon-precomposed" href="ico/apple-touch-icon-57-precomposed.png"&gt;
                                 &lt;link rel="shortcut icon" href="ico/favicon.png"&gt;
  
  &lt;style type="text/css"&gt;
  
  @media print {
      input {
          display:none !important;
      }
      .ui-helper-hidden-accessible {
          display:none !important;
      }
      #headRow {
          display:none;
      }
      .sidebar-nav {
          display:none !important;
      }
      select {
          display:none !important;
      }
      .dataList {
          width:90% !important;
      }
  }
  
      table.dataList {
          border-collapse: separate;
          border-spacing: 0;
      }
      table.dataList th {
          background-color: #f0f0f0;
      }
  
      table.dataList tr th,
      table.dataList tr td {
          border-right: 1px solid #bbb;
          border-bottom: 1px solid #bbb;
          padding: 5px;
      }
      table.dataList tr th:first-child,
      table.dataList tr td:first-child {
          border-left: 1px solid #bbb;
      }
      table.dataList tr th {
          background: #eee;
          border-top: 1px solid #bbb;
          text-align: left;
      }
  
      /* top-left border-radius */
      table.dataList tr:first-child th:first-child {
          border-top-left-radius: 6px;
      }
  
      /* top-right border-radius */
      table.dataList tr:first-child th:last-child {
          border-top-right-radius: 6px;
      }
  
      /* bottom-left border-radius */
      table.dataList tr:last-child td:first-child {
          border-bottom-left-radius: 6px;
      }
  
      /* bottom-right border-radius */
      table.dataList tr:last-child td:last-child {
          border-bottom-right-radius: 6px;
      }   
      tr.alternate {
          background-color: #f0f0f0;
      }
      .highlight {
          background-color:#FFFFE0 !important;
      }
  &lt;/style&gt;                                   
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row-fluid" id="headRow"&gt;
          &lt;div class="span2" style="text-align: center"&gt;
          &lt;img src="images/shop_click_drive_logo.jpg" style="width:100px"/&gt;
          &lt;/div&gt;
          &lt;div class="span10" style="vertical-align: bottom;padding-top:40px;padding-bottom:0px"&gt;
          &lt;ul class="nav nav-tabs" style="padding-bottom:0px;" id="topTabs"&gt;
            &lt;li class="active" id="dealerTab"&gt;&lt;a href="#" onclick="navToReport('dealer');return false;"&gt;Dealer Report&lt;/a&gt;&lt;/li&gt;
            &lt;li  id="statusTab"&gt;&lt;a href="#" onclick="navToReport('status');return false;"&gt;Dealer by Status&lt;/a&gt;&lt;/li&gt;
            &lt;li id="stepTab"&gt;&lt;a href="#" onclick="navToReport('step');return false;"&gt;Dealer by Step&lt;/a&gt;&lt;/li&gt;
            &lt;li id="userTab"&gt;&lt;a href="#" onclick="navToReport('user');return false;"&gt;Dealer by User&lt;/a&gt;&lt;/li&gt;
            &lt;li id="userTab"&gt;&lt;a href="#" onclick="navToReport('inProcess');return false;"&gt;"In Process" Report&lt;/a&gt;&lt;/li&gt;
            &lt;li id="userTab"&gt;&lt;a href="ajax.php?cmd=routeOneReport"&gt;RouteOne Report&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;           
  
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="row-fluid"&gt;
          &lt;div class="span2"&gt;
              &lt;div class="well sidebar-nav"&gt;
                  &lt;ul class="nav nav-list"&gt;
                    &lt;li&gt;&lt;a href="index.php"&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="tracker.php"&gt;Tracker&lt;/a&gt;&lt;/li&gt;
                    &lt;li class="active"&gt;&lt;a href="reports.php"&gt;Reports&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="broadcast.php"&gt;BroadCast&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="calendar.php"&gt;Calendar&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="documents.php"&gt;Documents&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="admin.php"&gt;Admin&lt;/a&gt;&lt;/li&gt;
                                        &lt;li&gt;&lt;a href="profile.php"&gt;Profile&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#" onclick="logout();"&gt;Logout&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;&lt;!--/.well --&gt;
          &lt;/div&gt;&lt;!--/span--&gt;
          &lt;div class="span10" id="mainContent" style="padding-left:20px"&gt;
              &lt;!-- Begin Content --&gt;
          &lt;div class="row"&gt;
  &lt;div class="span12"&gt;
  &lt;input type="text" style="width:50%" name="locationSelector" id="locationSelector" value="Start typing location name/id" onfocus="this.value=''"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  
      
  
      
  
  
  
  <p>               
              
          </p>
  
  <pre><code>&lt;/div&gt;&lt;!-- /container --&gt;
  </code></pre>
  
  <p></p>