ugrás a tartalomhoz

CSS nyomtatási rész beállítása

Theo76 · 2016. Aug. 14. (V), 19.31
Sziasztok!

Hogy lehet beállítani, hogy egy adott oldalnak csak egy megadott területét akarom kinyomtatni (egy php által generált A4-es dokumentumot), teljes oldalra.
A példa kód:

css:
  1. body {...}  
  2.   
  3. header {  
  4.     width:100%;  
  5.     height: 20px;  
  6. }  
  7.   
  8. content {  
  9.     position: fixed;  
  10.     width: 100%;  
  11.     margin-top: 30px;  
  12. }  
  13.   
  14. footer {  
  15.     position: fixed;  
  16.     width: 100%;  
  17.     height: 20px;  
  18.     bottom: 0;  
  19. }  
  20.   
  21. #dokumentum {  
  22.     width: 210mm;  
  23.     height: 297mm;  
  24. }  
  25.   
  26. @page {  
  27.     size: A4;  
  28.     margin: 0;  
  29. }  
  30.   
  31. @media print {  
  32.     body * { visibility:hidden; }  
  33.     html * { visibility:hidden; }  
  34.   
  35.     header * {  
  36.         visibility: hidden;  
  37.         display: none;  
  38.     }  
  39.   
  40.     #dokument * { visibility:visible; }  
  41. }  
html:
  1. <html>  
  2.   <body>  
  3.   <header>...</header>  
  4.   <content>  
  5.   <div id="dokument">  
  6. ...  
  7.   </div>  
  8.   </content>  
  9.   <footer>...</footer>  
  10.   </body>  
  11. </html>  
A gond az, hogy az oldal többi része tényleg nem kerül nyomtatásra, de sajnos a lapelrendezés meg marad. Azaz a header helye üres mezőként, illetve a content kerete is.
‹ nem fut le az email küldő php mobil verzió készítése ›
 ■
1

display: none;

Hidvégi Gábor · 2016. Aug. 15. (H), 10.41
visibility: hidden; helyett használj display: none;-t, mert az előbbi csak eltünteti az elemeket, de a helyüket meghagyja.
2

Köszi! :) Illetve meglett a

Theo76 · 2016. Aug. 15. (H), 19.13
Köszi! :)

Illetve meglett a másik gond is... A content elemnek az értékeit alapra kell állítani (background:transparent;margin:0;padding:0), és akkor rendesen fog megjelenni. :)