【发布时间】:2015-02-16 23:46:36
【问题描述】:
我有一个隐藏的页眉,在打印页面时会显示,但是当我尝试使用 chrome 40 打印它时,它不会占用全宽页面。为什么?
HTML
<div id="header">
<img id="logo" src="assets/img/brand.png">
<div id="title">Departamento de diagnostico por imagenes</div>
</div>
<div id="footer">
<p class="page"></p>
</div>
CSS
#header{
top:0px;
right:0px;
width: 100%;
height: 45px;
position:fixed;
border:1px solid #ccc;
}
#logo{
position: absolute;
top: 0;
left: 0;
height: 46px;
}
#title{
position: absolute;
top: 0;
right: 0;
font-size: 18px;
font-weight: bold;
}
#footer {
position: fixed;
left: 50%;
bottom: 0;
/*right: 0;*/
height: 40px;
text-align: center;
}
#footer .page:after {
content: counter(page, upper-roman);
font-size: 18px;
}
更新 我更改为绝对位置,它可以工作,它占据了整个宽度
但现在我意识到它并没有在每一页中重复,即使位置固定
还要注意带有数字页的页脚,由于位置固定,它的居中是错误的,但是当我将其更改为绝对时,它是正确的,但它会进入内容的底部,而不是页面的底部,并且在这两种情况下都不重复在每一页
【问题讨论】:
-
尝试删除打印样式表上的
position: fixed -
@maioman 没用
-
能否为页脚添加相关的 HTML 和 CSS?
-
@RamisWachtler 添加了
-
嗯,似乎对我有用。但是尝试在您的
#footer中将position: fixed更改为absolute并应用left: 0; width: 100%;