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