I have designed a webpage with a header, footer, and main content that includes Bootstrap 4 card list groups.
My goal is to create a printable version of this list where the elements do not break between pages. However, using page-break-inside: avoid does not seem to work as intended, causing the content to overlap with the footer.
To better understand the issue, refer to the following screenshot and code snippet: Click here to view the screenshot
header {
width: 100%;
position: fixed;
top: 0;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
}
main {
padding-top: 24pt;
padding-bottom: 48pt;
}
@media print {
li {
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
break-inside: avoid;
}
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8>
<title>Bootstrap 4 Card</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy" crossorigin="anonymous">
<link rel="stylesheet" href="script.css">
</head>
<body>
<header>Header</header>
<main class="container">
<div class="card">
<ul class="list-group list-group-flush">
<li class="list-group-item">
<h5 class="card-title">Title </h5>
<table class="table table-sm table-bordered">
<tbody>
<tr>
<th>Field</th>
<td>Value</td>
</tr>
<tr>
<th>Field</th>
<td>Value</td>
</tr>
<tr>
<th>Field</th>
<td>Value</td>
</tr>
<tr>
<th>Field</th>
<td>Value</td>
</tr>
<tr>
<th>Field</th>
<td>Value</td>
</tr>
</tbody>
</table>
</li>
<!-- More list items go here -->
</ul>
</div>
</main>
<footer>Footer</footer>
</body>
</html>