Problem mit Bootstrap Affix

lagraf · 18. August 2020

Ich möchte einen Header am oberen Rand fixieren, dazu verwende ich affix. Mit margin-top schiebe ich den Main Content hinunter, damit er nicht im Header liegt. Ist der Main Content länger als eine Seite und ich drucke die Page über die Browser Funktion, dann passt dies zwar bei der ersten Seite, ab der nächsten Seite schiebt sich der Text allerdings in den Header hinein. Wie kann ich das verhindern?

HTML

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
  .affix { position: fixed; top: 0; width: 100%; }
</style>
</head>

<body>
<div id="site-content"> 
    <header data-spy="affix" style="height: 70px; background:rgba(227,227,227,0.7); opacity: 0.8"> 
        <div style="text-align: center; font-size: 26px">
            Seitenkopf
        </div>
    </header>

    <main style="margin-top: 70px">
        <div style="width: 50px; margin-bottom: 20px;">
            aaaaa bbbbb ccccc ddddd eeeee fffff ggggg hhhhh iiiii jjjjj kkkkk lllll mmmmm nnnnn
        </div>
        <div style="width: 50px; margin-bottom: 20px;">
            aaaaa bbbbb ccccc ddddd eeeee fffff ggggg hhhhh iiiii jjjjj kkkkk lllll mmmmm nnnnn
        </div>
        <div style="width: 50px; margin-bottom: 20px;">
            aaaaa bbbbb ccccc ddddd eeeee fffff ggggg hhhhh iiiii jjjjj kkkkk lllll mmmmm nnnnn
        </div>
        <div style="width: 50px; margin-bottom: 20px;">
            aaaaa bbbbb ccccc ddddd eeeee fffff ggggg hhhhh iiiii jjjjj kkkkk lllll mmmmm nnnnn
        </div>
        <div style="width: 50px; margin-bottom: 20px;">
            aaaaa bbbbb ccccc ddddd eeeee fffff ggggg hhhhh iiiii jjjjj kkkkk lllll mmmmm nnnnn
        </div>
    </main>
</div>
</body>
</html>

Alles anzeigen

Sempervivum · 18. August 2020

Da gibt es anscheinend Leute, die sich über Jahre mit der Lösung dieses Problems beschäftigt haben :

https://stackoverflow.com/ques…rinted-page-of-a-document

Leider wird dort auch keine richtig gute und einfache Lösung angeboten.

lagraf · 18. August 2020

Hallo Sempervivum,

die Seite habe ich mir angesehen!

Am Besten funktioniert noch die Variante, wo man den gesamten Body-Inhalt in eine Table packt und Header bzw. Footer über thead und tfoot einbindet. Allerdings ist die Table-Syntax nicht mehr state-of-the-art.

Code

<style>
        @media print  { thead { display: table-header-group; } }
        @media print  { tfoot { display: table-footer-group; } }
        @media screen { thead { display: none } }
        @media screen { tfoot { display: none } }
</style>

<body>
<table>
   <thead><tr><td style="font-size: 24px; text-align: center">Header</td></tr></thead>
   <tbody><tr><td>

   <!-- Seiteninhalt -->

   </td></tr></tbody>
   <tfoot><tr><td style="font-size: 14px; text-align: center; color: red">All Rights reserved</td></tr></tfoot>
</table>
</body>

Alles anzeigen

Sempervivum · 18. August 2020

Zitat

Allerdings ist die Table-Syntax nicht mehr state-of-the-art.

Da hast Du Recht, deshalb schrieb ich auch, dass dort keine wirklich gute Lösung gegeben wird.

lagraf · 20. August 2020

Anstelle von <table> kann man auch display: table, usw. verwenden, das sollte dann ein wenig besserer Code sein.

Danke für deine Hilfe.

LG

Problem mit Bootstrap Affix

Jetzt mitmachen!

Teilen

Tags