英文:
How to remove Header and footer from HTML page when printing in browser using CSS
问题
我试图仅在HTML的第一页中删除页眉和页脚，而在打印时下一页将重复显示页眉和页脚，我找到了一种方法来删除页眉，但无法使用相同的方法删除页脚。
以下是删除页眉但未删除页脚的HTML和CSS代码：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="diff.css">
</head>
<body>
<body>
<!--这里是第一页页眉的HTML（显示在首页面上）-->
<header class="header-cover">
<img class="logo-big" src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</header>
<!-- 这里是重复的页眉的HTML（在其他页面上）-->
<header class="header">
<img class="logo-big" src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</header>
<table>
<thead>
<tr>
<td>
<!--用于固定位置页眉的占位符-->
<div class="header-space"> </div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** 内容放在这里 ***-->
<h1>Title</h1>
<p class="content">
<div class="page">
Content Goes here
</div>
</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--用于固定位置页脚的占位符-->
<div class="footer-space"> </div>
</td>
</tr>
</tfoot>
</table>
<!-- 重复的页脚 -->
<footer class="footer">
<p>
Text footer
</p>
</footer>
<footer class="footer-cover">
<p>
different footer
</p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>
</html>
CSS：
@media print {
.page{
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header, .header-cover {
display:flex;
}
.header {
top: 100%;
}
.header, .header-space {
height: 5rem;
}
.footer, .footer-space {
height: 4rem;
}
.footer, .footer-cover {
display: flex;
}
.footer {
bottom: 0;
}
}
我非常努力地尝试修复它，但是一直没有成功。
提前谢谢你的帮助。
我尝试复制了与页眉相同的操作，但没有成功，我尝试使用Jinja2模板将它们叠加在一起，但仍然没有成功。
一直在尝试使用CSS进行故障排除，但迄今为止没有成功。
英文:
I am trying to remove header and footer from first page only in a html and the header and footer will be repeated on the next pages while I am trying to print, I found a way to remove the header but I cannot remove the footer using the same method.
Here is the HTML and CSS that removes header but not footer.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="diff.css">
</head>
<body>
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
<img class="logo-big"
src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</header>
<!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
<img class="logo-big"
src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</header>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="header-space">&nbsp;</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<h1>Title</h1>
<p class="content">
<div class="page">
Content Goes here
</div>
</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="footer-space">&nbsp;</div>
</td>
</tr>
</tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
<p>
Text footer
</p>
</footer>
<footer class="footer-cover">
<p>
different footer
</p>
</footer>
<button onclick="window.print()">Test Here</button>
</body>
</html>
CSS:
@media print {
.page{
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header, .header-cover {
display:flex;
}
.header {
top: 100%;
}
.header, .header-space {
height: 5rem;
}
.footer, .footer-space {
height: 4rem;
}
.footer, .footer-cover {
display: flex;
}
.footer {
bottom: 0;
}
}
I am trying really hard to fix it but I am not able to do it.
Thank you in advance
I tried replicating the same what I did for Header but was not successful, I tried using Jinja2 template to stack them on top of each other, still didn't work.
Have been trying to troubleshoot using CSS but so far no success.
答案1
得分: 3
你现在有的代码对我来说似乎有效。 不过要注意的一点是，你之前的代码中有这样的部分：
<p class="content">
<div class="page">Content Goes here</div>
</p>
这实际上是无效的，因为你不能在<p>标签内包含块级元素，否则会导致段落在你意图之前关闭。所以我将它更改为以下内容：
<p class="content">
<span class="page">Content Goes here</span>
</p>
所以这是经过这个小修改后的你的代码：
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*This is just for the demo to show a style change*/
.is-home-page #title-not-home,
#wrapper:not(.is-home-page) #title-home {
display: none;
}
@media print {
.page{
page-break-after: always;
}
/*When a parent element has the `.is-home-page` class, the `.header` and `.footer` will not show when printing*/
.is-home-page .header,
.is-home-page .footer {
display: none;
}
}
<!-- language: lang-html -->
<div id="wrapper">
<h1 id="title-home">This is the home page</h1>
<h1 id="title-not-home">This is NOT the home page</h1>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
<img class="logo-big"
src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</header>
<!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
<img class="logo-big"
src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</header>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="header-space"> </div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<h1>Title</h1>
<p class="content">
<span class="page">
Content Goes here
</span>
</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="footer-space"> </div>
</td>
</tr>
</tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
<p>
Text footer
</p>
</footer>
<footer class="footer-cover">
<p>
different footer
</p>
</footer>
<hr/>
<button onclick="document.querySelector('#wrapper').classList.toggle('is-home-page')">Toggle home page Class</button>
<button onclick="window.print()">Test Print Preview</button>
</div>
<!-- end snippet -->
英文:
What you have seems to work for me. One thing to note though is that you had
<p class="content">
<div class="page">Content Goes here</div>
</p>
which is actually invalid because you cannot have a block level element inside of a <p> tag or else it will cause the paragraph to close before you intend it to. So I changed it to the following:
<p class="content">
<span class="page">Content Goes here</span>
</p>
So here's your code with that minor change made:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
/*This is just for the demo to show a style change*/
.is-home-page #title-not-home,
#wrapper:not(.is-home-page) #title-home {
display: none;
}
@media print {
.page{
page-break-after: always;
}
/*When a parent element has the `.is-home-page` class, the `.header` and `.footer` will not show when printing*/
.is-home-page .header,
.is-home-page .footer {
display: none;
}
}
<!-- language: lang-html -->
<div id="wrapper">
<h1 id="title-home">This is the home page</h1>
<h1 id="title-not-home">This is NOT the home page</h1>
<!--Here the HTML of the first header (displayed on landing page)-->
<header class="header-cover">
<img class="logo-big"
src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</header>
<!-- Here the HTML of the repeated header (on others pages)-->
<header class="header">
<img class="logo-big"
src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</header>
<table>
<thead>
<tr>
<td>
<!--place holder for the fixed-position header-->
<div class="header-space">&nbsp;</div>
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<!--*** CONTENT GOES HERE ***-->
<h1>Title</h1>
<p class="content">
<span class="page">
Content Goes here
</span>
</p>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div class="footer-space">&nbsp;</div>
</td>
</tr>
</tfoot>
</table>
<!-- Repeated Footer -->
<footer class="footer">
<p>
Text footer
</p>
</footer>
<footer class="footer-cover">
<p>
different footer
</p>
</footer>
<hr/>
<button onclick="document.querySelector('#wrapper').classList.toggle('is-home-page')">Toggle home page Class</button>
<button onclick="window.print()">Test Print Preview</button>
</div>
<!-- end snippet -->
答案2
得分: 1
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="diff.css">
<style>
@media print {
.page{
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header, .header-cover {
display:flex;
}
.header {
top: 100%;
}
.header, .header-space {
height: 5rem;
}
.footer, .footer-space {
height: 4rem;
}
.footer, .footer-cover {
display: flex;
}
.footer {
bottom: 0;
}
}
</style>
</head>
<body>
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<div class="header-cover">
<img class="logo-big"
src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</div>
<!-- Here the HTML of the repeated header (on others pages)-->
<div class="header">
<img class="logo-big"
src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</div>
<!--place holder for the fixed-position header-->
<div class="header-space"> </div>
<!--*** CONTENT GOES HERE ***-->
<h1>Title</h1>
<p class="content">
<div class="page">
Content Goes here
</div>
</p>
<!--place holder for the fixed-position footer-->
<div class="footer-space"></div>
<!-- Repeated Footer -->
<div class="footer">
<p>
Text footer
</p>
</div>
<div class="footer-cover">
<p>
different footer
</p>
</div>
<button onclick="window.print()">Test Here</button>
</body>
</html>
英文:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<link rel="stylesheet" href="diff.css">
<style>
@media print {
.page{
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header, .header-cover {
display:flex;
}
.header {
top: 100%;
}
.header, .header-space {
height: 5rem;
}
.footer, .footer-space {
height: 4rem;
}
.footer, .footer-cover {
display: flex;
}
.footer {
bottom: 0;
}
}
</style>
</head>
<body>
<body>
<!--Here the HTML of the first header (displayed on landing page)-->
<div class="header-cover">
<img class="logo-big"
src="https://picsum.photos/150/100" />
<div class="right">
Header 1
</div>
</div>
<!-- Here the HTML of the repeated header (on others pages)-->
<div class="header">
<img class="logo-big"
src="https://picsum.photos/200/100" />
<div class="right">
Repeated Header
</div>
</div>
<!--place holder for the fixed-position header-->
<div class="header-space">&nbsp;</div>
<!--*** CONTENT GOES HERE ***-->
<h1>Title</h1>
<p class="content">
<div class="page">
Content Goes here
</div>
</p>
<!--place holder for the fixed-position footer-->
<div class="footer-space"></div>
<!-- Repeated Footer -->
<div class="footer">
<p>
Text footer
</p>
</div>
<div class="footer-cover">
<p>
different footer
</p>
</div>
<button onclick="window.print()">Test Here</button>
</body>
</html>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论