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:

body {...}

header {
    width:100%;
    height: 20px;
}

content {
    position: fixed;
    width: 100%;
    margin-top: 30px;
}

footer {
    position: fixed;
    width: 100%;
    height: 20px;
    bottom: 0;
}

#dokumentum {
    width: 210mm;
    height: 297mm;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    body * { visibility:hidden; }
    html * { visibility:hidden; }

    header * {
        visibility: hidden;
        display: none;
    }

    #dokument * { visibility:visible; }
}
html:

<html>
  <body>
  <header>...</header>
  <content>
  <div id="dokument">
...
  </div>
  </content>
  <footer>...</footer>
  </body>
</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. :)