javascript - 在进行 CSS 打印时,正文部分进入页眉区域

标签 javascript html css printing print-css

当我打印正文内容时,正文内容位于页眉区域下方。

我写 1-9 数字不显示数字只显示数字是从 5 开始我认为问题是我们添加的位置是固定的如果我们不使用位置固定页眉和页脚将不会显示所有页面

    body {
        background: #eaeaed;
        -webkit-print-color-adjust: exact;
    }
    .my-footer{
        background: #2db34a;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        height: 80px;
    }
    .my-header {
        background: red;
        top: 0;
        left: 0;
        position: fixed;
        right: 0;
        height: 100px;
        padding-bottom: 10px;
    }
<html>
    <head>
        <meta charset=utf-8 />
        <title>Header & Footer</title>
 
    </head> 
    <body>
        <div>
            <div class="my-header">Fixed Header</div>
            <div class="my-footer">Fixed Footer</div>
            <table>
                <thead>
                    <tr><th>TH 1</th><th>TH 2</th></tr>
                </thead>
                <tbody>
                    <tr><td>1</td><td>1</td></tr>
                    <tr><td>2</td><td>2</td></tr>
                    <tr><td>3</td><td>3</td></tr>
                    <tr><td>4</td><td>4</td></tr>
                    <tr><td>5</td><td>5</td></tr>
                    <tr><td>6</td><td>6</td></tr>
                    <tr><td>7</td><td>7</td></tr>
                    <tr><td>8</td><td>8</td></tr>
                    <tr><td>9</td><td>9</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                    <tr><td>TD 1</td><td>TD 2</td></tr>
                </tbody>
            </table>
        </div>
    </body>
</html>

 body {
        background: #eaeaed;
        -webkit-print-color-adjust: exact;
        margin-top:100px;
        margin-bottom:100px;
    }
    .my-footer{
        background: #2db34a;
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        height: 80px;
    }
    .my-header {
        background: red;
        top: 0;
        left: 0;
        position: fixed;
        right: 0;
        height: 100px;
        padding-bottom: 10px;
     }
</style> 
<html>

<head>
  <meta charset=utf-8 />
  <title>Header & Footer</title>
  
</head>

<body>
  <div class="container">
    <div class="my-header">Fixed Header</div>
    <div class="my-footer">Fixed Footer</div>
    <table>
      <thead>
        <tr>
          <th>TH 1</th>
          <th>TH 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>2</td>
        </tr>
        <tr>
          <td>3</td>
          <td>3</td>
        </tr>
        <tr>
          <td>4</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>5</td>
        </tr>
        <tr>
          <td>6</td>
          <td>6</td>
        </tr>
        <tr>
          <td>7</td>
          <td>7</td>
        </tr>
        <tr>
          <td>8</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>9</td>
        </tr>
        <tr>
          <td>10</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>11</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>12</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>13</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>14</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>15</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>16</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>17</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>18</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>19</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>20</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>21</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>22</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>23</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>24</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>25</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>26</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>27</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>28</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>29</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>30</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>31</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>32</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>33</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>34</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>35</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>36</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>37</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>38</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>39</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>40</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>41</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>42</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>43</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>44</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>45</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>46</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>47</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>48</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>49</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>50</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>51</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
 
      </tbody>
    </table>
  </div>
</body>

</html>

最佳答案

试试这个!

 html,
     body {         
               height:   100%;
               min-height:   100%;
               background: #eaeaed;
               -webkit-print-color-adjust: exact;
               }
               .my-table
               {
                    position: absolute; 
                    top: 8%;
                    overflow: scroll;
                    height:83%;
                    width: 100%;
               }

               .my-footer
               {
                    background: #2db34a;
                    bottom: 0;
                    left: 0;
                    position: absolute;    ;
                    right: 0;
                    height: 8%;
               }
               .my-header 
               {
                    background: red;
                    top: 0;
                    left: 0;
                    position: absolute;    ;
                    right: 0;
                    height: 8%;
                    z-index:  9;
               }
          }
<html>
    <head>
        <meta charset=utf-8 />
        <title>Header & Footer</title>
 
    </head> 
    <body>
        <div style="height: 100%; position: relative; height:    100%;">
            <div class="my-header">Fixed Header</div>
            <div class="my-table">
               <table class="" style="">
                   <thead>
                       <tr><th>TH 1</th><th>TH 2</th></tr>
                   </thead>
                   <tbody>
                       <tr><td>1</td><td>1</td></tr>
                       <tr><td>2</td><td>2</td></tr>
                       <tr><td>3</td><td>3</td></tr>
                       <tr><td>4</td><td>4</td></tr>
                       <tr><td>5</td><td>5</td></tr>
                       <tr><td>6</td><td>6</td></tr>
                       <tr><td>7</td><td>7</td></tr>
                       <tr><td>8</td><td>8</td></tr>
                       <tr><td>9</td><td>9</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>TD 1</td><td>TD 2</td></tr>
                       <tr><td>End</td><td>End</td></tr>
                   </tbody>
               </table>
            </div>
            
            <div class="my-footer">Fixed Footer</div>
            
        </div>
    </body>
</html>

关于javascript - 在进行 CSS 打印时,正文部分进入页眉区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42825716/

相关文章:

javascript - 两个脚本相互冲突 - 第二个脚本有效 - 寻找解决方案

angular - IE 11 Angular Material 复选框显示在同一位置

javascript - 无法让 Jquery .each 函数正常工作

html - 长字符串干扰 div 对齐/形成

javascript - 我的 JSON 结果的输出

javascript - 使用 JavaScript 切换段落显示

javascript - 当另一个打开时,我需要什么代码来折叠一个 div?

Jquery 不会从 XML 中逐字插入 CDATA 到 html 中

javascript - 在模态中选择 2 个功能问题

css - 试图在 Bootstrap 3 中对齐两列,但我无法弄清楚