用于打印的固定标题不占整页宽度

Question

我有一个隐藏的标题，在打印页面时显示，但是当我尝试使用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;
}

更新 我改为绝对位置，它起作用，它取全宽

但现在我意识到，即使位置已经固定，它也不会在每个页面中重复

另请注意页码有页码，因为固定位置错误居中，但当我将其更改为绝对时它是正确的但是它会转到内容的底部，而不是页面的底部，并且在这两种情况下都不会在每一页中重复

Answer 1

删除fixed位置，添加absolute，我也将height #logo更改为100%而不是{{} 1}}

<强>段

＆＃13;

＆＃13;

46px

＆＃13;

body {
  font-family: Arial, sans-serif;
}
#header {
  top: 0px;
  right: 0px;
  width: 100%;
  height: 45px;
  position: absolute;
  border: 1px solid #ccc;
}
#logo {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#title {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 18px;
  font-weight: bold;
}
h3 {
  margin-top: 100px;
}
#header-table {
  top: 150px;
  /*Change to 0px when supposed to use*/
  right: 0px;
  width: 100%;
  height: 45px;
  position: absolute;
  border: 1px solid #ccc;
  display: table;
}
#logo-cell {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
#title-cell {
  display: table-cell;
  vertical-align: middle;
  font-size: 18px;
  font-weight: bold;
  text-align: right;
}

＆＃13;

＆＃13;

＆＃13;