What I am trying to do is, creating a layout like Magzine. I use CSS Grid in my HTML to create a layout, anyhow layout looks good when i render it or open it in a browser, but when i hit Ctrl + P to take a print out the Header and Footer are getting distorted, what i want is like they will appear in the middle with some padding on both Header and Footer
As you can see the footer going into left and the body text and header are getting collapsed with each other. Same is happening with footer.
* {
box-sizing: border-box;
-moz-box-sizing: border-box;
}
body {
width: 21cm;
min-height: 29.7cm;
padding: 1cm;
margin: 1cm auto;
border-radius: 5px;
background: white;
font-size: 14px;
font-family: 'Droid Serif', serif;
}
header,
footer {
text-align: center;
padding: 10px;
}
h1{
margin: 0 auto;
}
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(12, 1fr));
grid-gap: 1em;
grid-auto-rows: minmax(auto-fill, auto);
grid-template-areas: "h h h h h h h h h h h h" "m m m c c c c c c c c c" "l l l l l l r r r r r r";
}
.container>div {
column-count: 2;
}
p::first-letter {
font-style: italic;
font-weight: bold;
font-size: 40px;
}
h2 {
text-align: center;
font-style: italic;
font-weight: bold;
column-span: all;
}
.container>.item_LayoutOne_100Percent {
grid-area: h;
}
.container>.item_LayoutTwo_50Percent_layoutOne {
grid-area: l;
}
.container>.item_LayoutTwo_50Percent_layoutTwo {
grid-area: r;
}
.container>.item_LayoutThree_75Percent {
grid-column: c;
}
.container>.item_LayoutFour_25Percent {
grid-column: m;
}
h1{
margin-left: auto;
margin-right: auto;
text-align: center;
}
@page {
size: A4;
margin: 11mm 17mm 17mm 17mm;
}
@media print {
footer {
position: fixed;
bottom: 0;
margin:-10px;
}
header {
position: fixed;
top: 0;
}
p {
page-break-inside: avoid;
}
html,
body {
width: 210mm;
height: 297mm;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Magzine Design</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <script src="main.js"></script> -->
</head>
<body>
<header>
<h1>Some Content Name</h1>
</header>
<div class="container">
<div class="content-block item_LayoutOne_100Percent">
<h2>Demo Heading for 100% Layout</h2>
It was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped
to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits
</div>
<div class="content-block item_LayoutTwo_50Percent_layoutOne">
<h2>Demo Heading for 50% Layout</h2>
it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped
to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits
</div>
<div class="content-block item_LayoutTwo_50Percent_layoutTwo">
<h2>Demo Heading for 50% Layout</h2>
it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore
confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began
</div>
<div class="content-block item_LayoutFour_25Percent">
<h2>Demo Heading for 25% Layout</h2>
it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore
confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began
</div>
<div class="content-block item_LayoutThree_75Percent">
<h2>Demo Heading for 75% Layout</h2>
it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore
confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began
</div>
</div>
<footer>
Some Content Name
</footer>
</body>
</html>This is my snippet, please help me if I am doing wrong somewhere, I have tried many methods on @print like providing padding or margin to the header and footer, but nothing worked.
