Eskiden bir web sayfasını (bu web sayfası kelimesine de başka bir isim bulsa keşke T.D.K. neticede “w” harfi alfabemizde yok) bastırdığımızda peşpeşe sıralanmış iğrenç görünümlü çıktılar alıyorduk hoş bu biraz da browserların kabiliyetsizliğinden kaynaklanan birşeydi ama yinede programcının da elini kolunu bağlayan şeyler vardı. İşte bu açıkları kapamak için W3 CSS standartlarında media bölümünü genişletti ve birçok yeni betimleme ekleyerek yeni nesil browserlara da bunları kabul ettirdi.

Çok fazla konuyu uzatmadan kod kısmına girmek daha doğru olur sanırım sonuçta yukarıda yazdıklarımı belkide okumayabilirsiniz bile

	div.icerik{
	  page-break-after: auto;
	  padding: 7.5em 0 3em;
	}

	div.header,
	div.footer {
	  position: fixed;
	  background: #ddd;
	  opacity: 0.5;
	  border: 0px solid #888;
	  width: 100%;
	  overflow:hidden;
	}

	div.header {
	  top: 0cm;
	  border-bottom-width: 1px;
	  height: 7.5em;
	}

	div.footer {
	  bottom: 0cm;
	  border-top-width: 1px;
	  height: 3em;
	}

	@media print {
	  div.header,
	  div.footer {
	    opacity: 1;
	    background: #fff;
	  }
	}

	@media screen {
	  div.icerik{
	    border-bottom: 1px dotted #888;
	  }
	}

Aslında yukarıdaki kod herşeyi anlatıyor olmasına rağmen birde açıklamasını yapalım

page-break-after: auto; icerik id li divi otomatik olarak sayfalamasını istedik
padding: 7.5em 0 3em;  ile icerik divini boyutlandırdık üstten 7.5 alttan da 3 em olacak şekilde

 geri kalanda da header ve footer divini boyutlandırdık header kısmını 7.5 em footer kısmını da 3em uzunluğunda olacak şekilde.

dikkat edilmesi gereken bir şey daha

@media print: sayfanızı yazdırma esnasında uygulanacak olan stil kısmını içerir
@media screen:  sayfanızın tarayıcıdaki görünüşünün stilidir