<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 页面名称 </title>
<style type="text/css">
header, footer {
display: none;
}
@media print {
header {
display: block;
}
footer {
display: block;
}
}
</style>
</head>
<body>
<header>页眉</header>
<p>内容</p>
<footer>页脚</footer>
</body>
</html>
HTML结构
<div class="wrapper">
<div class="content">内容</div>
<div class="footer">页脚</div>
</div>
html, body {
height: 100%;
}
.wrapper {
position: relative;
min-height: calc(100% - 40px); //这里可以调整一下
padding-bottom: 40px;
box-sizing: border-box;
}
.footer {
position: absolute;
bottom: 0;
height: 40px;
width: 100%;
text-align: center;
line-height: 40px;
}