如何仅在页眉和页脚之间显示数据答案

【问题标题】：How to display data in between header and footer only如何仅在页眉和页脚之间显示数据
【发布时间】：2018-05-11 08:46:48
【问题描述】：

我做了一个简单的 html 页面，带有一点 CSS（在 CSS 中不是很好）来显示页眉和页脚之间的数据，但是当我在中间创建一个包含长数据的表格数据时，它与页脚重叠并且下一页的标题。下面是代码：

<html>
  <head>
    <style>
      p { page-break-after: always; }
      .footer { position: fixed; bottom: 0px; }
      .header { position: fixed; top: 0px; }
    </style>
  </head>
  <body>
    
    <div class="header">this is the header</div><br>

<!--     <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p> -->

    <table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

    <div class="footer">this is the footer</div>

  </body>
</html>

这是输出：

但如果我使用<p> CSS 来做，我认为它可以很好地使用此代码：

<html>
  <head>
    <style>
      p { page-break-after: always; }
      .footer { position: fixed; bottom: 0px; }
      .header { position: fixed; top: 0px; }
    </style>
  </head>
  <body>
    
    <div class="header">this is the header</div><br>

    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p>

    <div class="footer">this is the footer</div>

  </body>
</html>

和输出：

如何在页脚之前显示表格数据并在下一页页眉之后继续？

【问题讨论】：

这个输出是从哪里来的？ PDF 转换器？
目前我对其进行了硬编码，但稍后我将使用 PHP 从数据库中调用数据。它要打印报告
没有你的 CSS 坏了，因为标题浮动在内容的顶部。

标签： php html laravel html-table

【解决方案1】：

不确定这是否是您所要求的，但 fixed 位置超出了页面的正常流程。这意味着它不占用空间。因此，为了抵消这一点，您可以将页面包装在一个 div 中，并为其设置与页眉和页脚大小相匹配的边距。

这样，标题就不会覆盖内容。如果它有滚动条，它仍然会被页脚覆盖。通常你只会像这样修复标题。

我还对背景进行了着色以使其更易于查看，并将它们从类 . 切换为 ids #。这些是主要页面元素，您应该只有一个，所以它们应该是 ID。

点击按钮看看我的意思。

$(document).ready(function(){
  
     $('#test').click(function(){
          if($('#page').css('margin-top') == '60px'){
               $('#page').css('margin-top', '');
          }else{
              $('#page').css('margin-top', '60px');
          }
     });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <head>
    <style>
      p {
          page-break-after: always;
        }
      #footer { 
        position: fixed; 
        bottom: 0px; 
        width:100%; 
        height:40px; 
        background: #eee; 
      }
      #header {
        position: fixed; 
        top: 0px; 
        width:100%; 
        height:60px; 
        background: #eee;
       }
      #page{ 
        /*margin-top: 60px; /* should match height of header */
        margin-bottom: 40px;/* should match height of footer */
        width:100%;
      }
    </style>
  </head>
  <body>
    
    <div id="header">this is the header</div><br>

<!--     <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p> -->
    <div id="page" >
          <table style="width:100%">
          <tr>
            <th>Firstname</th>
            <th>Lastname</th> 
            <th>Age</th>
          </tr>
          <tr>
            <td>Jill</td>
            <td>Smith</td>
            <td>50</td>
          </tr>
          <tr>
            <td><input type="button" value="Test" id="test" />Eve</td>
            <td>Jackson</td>
            <td>94</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Doe</td>
            <td>80</td>
          </tr>
        </table>
    </div>
    

    <div id="footer">this is the footer</div>

  </body>
</html>

【讨论】：

嗨，我认为它有点工作，但数据结束如此接近页脚你知道如何设置边距或其他东西，所以它看起来比页脚高一点吗？
是的，但它是晚餐，可能来自 SO 页面的一些默认样式正在添加一些填充，而不是。
只需将 css 中的 margin-bottom: 40px; 更改为更大的，也许是 60px？

【解决方案2】：

渲染和打印会有点不同......

您是否尝试了正确的 html5 标签？

 <header class="header">this is the header</header><br>

    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p>

    <footer class="footer">this is the footer</footer>

【讨论】：

<footer class="footer">...</div> :-p

【解决方案3】：

只需将.footr 设为absolute 并将bottom 设置为负长度：即：

.footer { position: absoulte; bottom: -10px; }

更新

您也可以将.header 位置设置为绝对位置，但您将失去它作为飞行标题。

.header { position: absolute; top: 0px; }

<html>
  <head>
    <style>
      p { page-break-after: always; }
      .footer { position: absoulte; bottom: -10px; }
      .header { position: absolute; top: 0px; }
    </style>
  </head>
  <body>
    
    <div class="header">this is the header</div><br>

<!--     <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p><br>
    <p>lorem ipsum ...</p> -->

    <table style="width:100%">
    <tr>
      <th>Firstname</th>
      <th>Lastname</th> 
      <th>Age</th>
    </tr>
    <tr>
      <td>Jill</td>
      <td>Smith</td>
      <td>50</td>
    </tr>
    <tr>
      <td>Eve</td>
      <td>Jackson</td>
      <td>94</td>
    </tr>
    <tr>
      <td>John</td>
      <td>Doe</td>
      <td>80</td>
    </tr>
  </table>

    <div class="footer">this is the footer</div>

  </body>
</html>

【讨论】：