2023年6月8日 16:12:30go评论81阅读模式

英文:

How to create a footer that stays at the bottom of the print screen?

问题

我正在尝试创建一个页脚，该页脚在每个打印的页面（A4大小）上都会重复显示，而不会重叠页面的内容。我尝试了许多变种，但要么页脚无法固定在底部并随内容滚动，要么会重叠内容。

<style>
  @media print {
    #footer {
      position: fixed;
      bottom:0;
      color: black;
    }
  }
</style>

<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
    <thead style="display: table-header-group;">
        <tr>
            <td>
              Header
            </td>
        </tr>
    </thead>

    <tbody style="padding: 20px">
      <tr><td>
      <div class="content">
        <h1>Page Content</h1>
        <div id="lines-container"></div>

        <script>
          // Get the lines container element
          var linesContainer = document.getElementById("lines-container");

          // Generate 40 lines
          for (var i = 0; i < 80; i++) {
            var line = document.createElement("div");
            line.textContent = "Line " + (i + 1);
            linesContainer.appendChild(line);
          }
        </script>
      </div>
    </td></tr>

    </tbody>

    <tfoot id="footer">
        <tr>
          <td colspan="99" style="border-top: solid 2px #9fdba9;">
             <table>
                   <tr>
                    <td  colspan="99" style="vertical-align: middle;">
                        <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                        style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
                    </td>
                    <td style="vertical-align: middle; text-align: left; padding: 2;">
                        <div>Address: </div>
                        <div>Tel:  </div>
                    </td>
                    <td style="vertical-align: middle; text-align: left; padding: 2;">
                        <div> Email: </div>
                        <div> Website:	</div>   
                    </td>
                  </tr>   
              </table>
           </td>
        </tr>   
    </tfoot>
</table>

我的问题是，当我按Ctrl + P进行打印时，页脚会重叠在内容上。

英文:

I am trying to create a footer that get repeated on every printed page (size A4) without overlaping the contet of the page. I tried many varaions either the footer does not stick to bottom and follows the content or it overlaps the content.

&lt;style&gt;
@media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
}
&lt;/style&gt;
&lt;table style=&quot;width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact&quot;&gt;
&lt;thead style = &quot;display: table-header-group;&quot;&gt;
&lt;tr&gt;
&lt;td&gt;
Header
&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody style=&quot;padding: 20px&quot;&gt;
&lt;tr&gt;&lt;td&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;h1&gt;Page Content&lt;/h1&gt;
&lt;div id=&quot;lines-container&quot;&gt;&lt;/div&gt;
&lt;script&gt;
// Get the lines container element
var linesContainer = document.getElementById(&quot;lines-container&quot;);
// Generate 40 lines
for (var i = 0; i &lt; 80; i++) {
var line = document.createElement(&quot;div&quot;);
line.textContent = &quot;Line &quot; + (i + 1);
linesContainer.appendChild(line);
}
&lt;/script&gt;
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot id=&quot;footer&quot;&gt;
&lt;tr&gt;
&lt;td colspan=&quot;99&quot; style=&quot;border-top: solid 2px #9fdba9;&quot; &gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td  colspan=&quot;99&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;img src=&quot;http://127.0.0.1:5566/view-attachment?N0b3J5&quot; alt=&quot;SVG Image&quot;
style=&quot;width: 100px; height: 75px; padding: 2px; padding-right: 20px;&quot;&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt;Address: &lt;/div&gt;
&lt;div&gt;Tel:  &lt;/div&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt; Email: &lt;/div&gt;
&lt;div&gt; Website:	&lt;/div&gt;   
&lt;/td&gt;
&lt;/tr&gt;   
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;   
&lt;/tfoot&gt;
&lt;/table&gt;

My issuse is the footer overlapaing the content when I hit Ctrl + P to print it.

答案1

得分: 0

你可以尝试使用 position: sticky 而不是 position: fixed。

编辑
我找到了另一种解决方案，使用一个不可见的 tfoot 作为空间占位。你可以在下面检查这个解决方案。

#footer,
#footer-space {
    height: 50px;
}

#footer {
    position: fixed;
    bottom: 0;
}

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <button type="button" onClick="window.print()">
    PRINT ME!
  </button>

  <table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
    <thead style="display: table-header-group;">
      <tr>
        <td>
          Header
        </td>
      </tr>
    </thead>

    <tbody style="padding: 20px">
      <tr>
        <td>
          <div class="content">
            <h1>Page Content</h1>
            <div id="lines-container"></div>

            <script>
              // Get the lines container element
              var linesContainer = document.getElementById("lines-container");

              // Generate 40 lines
              for (var i = 0; i < 80; i++) {
                var line = document.createElement("div");
                line.textContent = "Line " + (i + 1);
                linesContainer.appendChild(line);
              }
            </script>
          </div>
        </td>
      </tr>

    </tbody>

    <tfoot>
      <tr>
        <td>
          <!-- 占位符，用于固定位置的页脚 -->
          <div id="footer-space"></div>
        </td>
      </tr>
    </tfoot>

    <tfoot id="footer">
      <tr>
        <td colspan="99" style="border-top: solid 2px #9fdba9;">
          <table>
            <tr>
              <td colspan="99" style="vertical-align: middle;">
                <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                  style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
              </td>
              <td style="vertical-align: middle; text-align: left; padding: 2;">
                <div>Address:</div>
                <div>Tel:</div>
              </td>
              <td style="vertical-align: middle; text-align: left; padding: 2;">
                <div>Email:</div>
                <div>Website:</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </tfoot>
  </table>

</body>

</html>

英文:

You can try position: sticky instead of position: fixed.

Edit
I find some another solution using one tfoot as invisible space. You can check this below.

#footer,
#footer-space {
height: 50px;
}
#footer {
position: fixed;
bottom: 0;
}

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html;charset=UTF-8&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;style.css&quot; /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;button type=&quot;button&quot; onClick=&quot;window.print()&quot;&gt;
PRINT ME!
&lt;/button&gt;
&lt;table style=&quot;width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact&quot;&gt;
&lt;thead style=&quot;display: table-header-group;&quot;&gt;
&lt;tr&gt;
&lt;td&gt;
Header
&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody style=&quot;padding: 20px&quot;&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;h1&gt;Page Content&lt;/h1&gt;
&lt;div id=&quot;lines-container&quot;&gt;&lt;/div&gt;
&lt;script&gt;
// Get the lines container element
var linesContainer = document.getElementById(&quot;lines-container&quot;);
// Generate 40 lines
for (var i = 0; i &lt; 80; i++) {
var line = document.createElement(&quot;div&quot;);
line.textContent = &quot;Line &quot; + (i + 1);
linesContainer.appendChild(line);
}
&lt;/script&gt;
&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;!--place holder for the fixed-position footer--&gt;
&lt;div id=&quot;footer-space&quot;&gt;&lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;tfoot id=&quot;footer&quot;&gt;
&lt;tr&gt;
&lt;td colspan=&quot;99&quot; style=&quot;border-top: solid 2px #9fdba9;&quot;&gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td colspan=&quot;99&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;img src=&quot;http://127.0.0.1:5566/view-attachment?N0b3J5&quot; alt=&quot;SVG Image&quot;
style=&quot;width: 100px; height: 75px; padding: 2px; padding-right: 20px;&quot;&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt;Address: &lt;/div&gt;
&lt;div&gt;Tel: &lt;/div&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt; Email: &lt;/div&gt;
&lt;div&gt; Website: &lt;/div&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;
&lt;/tfoot&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

答案2

得分: 0

我尝试了一切，但没有成功，所以我编辑了您的脚本并添加了<div id="lines-container-2"></div>并给它添加了margin-top:60px;，您可以在ctrl+p中检查结果

@media print {
  #footer {
    position: fixed;
    bottom: 0;
    color: black;
  }
  #lines-container {
    height: 790px;
    overflow: hidden;
  }
  #lines-container-2 {
    height: 790px;
    overflow: hidden;
    margin-top: 60px;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="White.css">
    <title>Document</title>
</head>
<body>
    <table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
        <thead style="display: table-header-group;">
            <tr>
                <td>
                  Header
                </td>
            </tr>
        </thead>

        <tbody style="padding: 20px">
          <tr><td>
          <div class="content">
            <h1>Page Content</h1>
            <div id="lines-container"></div>
            <div id="lines-container-2"></div>
            <script>
              // Get the lines container element
              var linesContainer = document.getElementById("lines-container");

              // Generate 40 lines
              for (var i = 0; i < 44; i++) {
                var line = document.createElement("div");
                line.textContent = "Line " + (i + 1);
                linesContainer.appendChild(line);
              }
              // Get the lines container element
              var linesContainer = document.getElementById("lines-container-2");

              // Generate 40 lines
              for (var i = 44; i < 80; i++) {
                var line = document.createElement("div");
                line.textContent = "Line " + (i + 1);
                linesContainer.appendChild(line);
              }
            </script>
          </div>
        </td></tr>

        </tbody>

        <tfoot id="footer">
            <tr>
              <td colspan="99" style="border-top: solid 2px #9fdba9;">
                 <table>
                       <tr>
                        <td  colspan="99" style="vertical-align: middle;">
                            <img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
                            style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
                        </td>
                        <td style="vertical-align: middle; text-align: left; padding: 2;">
                            <div>Address: </div>
                            <div>Tel:  </div>
                        </td>
                        <td style="vertical-align: middle; text-align: left; padding: 2;">
                            <div> Email: </div>
                            <div> Website:  </div>   
                        </td>
                      </tr>   
                  </table>
               </td>
            </tr>   
        </tfoot>
</table>

</body>
</html>

英文:

I tried everything but didn't work so I edited your script and added <div id="lines-container-2"></div> and gave it margin-top:60px; that you can check the result in ctrl+p

  @media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
#lines-container {
height:790px;
overflow: hidden;
}
#lines-container-2 {
height:790px;
overflow: hidden;
margin-top:60px;
}
}

&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;White.css&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;table style=&quot;width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact&quot;&gt;
&lt;thead style = &quot;display: table-header-group;&quot;&gt;
&lt;tr&gt;
&lt;td&gt;
Header
&lt;/td&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody style=&quot;padding: 20px&quot;&gt;
&lt;tr&gt;&lt;td&gt;
&lt;div class=&quot;content&quot;&gt;
&lt;h1&gt;Page Content&lt;/h1&gt;
&lt;div id=&quot;lines-container&quot;&gt;&lt;/div&gt;
&lt;div id=&quot;lines-container-2&quot;&gt;&lt;/div&gt;
&lt;script&gt;
// Get the lines container element
var linesContainer = document.getElementById(&quot;lines-container&quot;);
// Generate 40 lines
for (var i = 0; i &lt; 44; i++) {
var line = document.createElement(&quot;div&quot;);
line.textContent = &quot;Line &quot; + (i + 1);
linesContainer.appendChild(line);
}
// Get the lines container element
var linesContainer = document.getElementById(&quot;lines-container-2&quot;);
// Generate 40 lines
for (var i = 44; i &lt; 80; i++) {
var line = document.createElement(&quot;div&quot;);
line.textContent = &quot;Line &quot; + (i + 1);
linesContainer.appendChild(line);
}
&lt;/script&gt;
&lt;/div&gt;
&lt;/td&gt;&lt;/tr&gt;
&lt;/tbody&gt;
&lt;tfoot id=&quot;footer&quot;&gt;
&lt;tr&gt;
&lt;td colspan=&quot;99&quot; style=&quot;border-top: solid 2px #9fdba9;&quot; &gt;
&lt;table&gt;
&lt;tr&gt;
&lt;td  colspan=&quot;99&quot; style=&quot;vertical-align: middle;&quot;&gt;
&lt;img src=&quot;http://127.0.0.1:5566/view-attachment?N0b3J5&quot; alt=&quot;SVG Image&quot;
style=&quot;width: 100px; height: 75px; padding: 2px; padding-right: 20px;&quot;&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt;Address: &lt;/div&gt;
&lt;div&gt;Tel:  &lt;/div&gt;
&lt;/td&gt;
&lt;td style=&quot;vertical-align: middle; text-align: left; padding: 2;&quot;&gt;
&lt;div&gt; Email: &lt;/div&gt;
&lt;div&gt; Website:  &lt;/div&gt;   
&lt;/td&gt;
&lt;/tr&gt;   
&lt;/table&gt;
&lt;/td&gt;
&lt;/tr&gt;   
&lt;/tfoot&gt;
&lt;/table&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

如何创建一个保持在打印页面底部的页脚？

问题

答案1

答案2

客户端屏幕在管理员用户登录应用程序时会短暂显示。

Google Apps脚本以将带有评论的行移至另一工作表。

始终在特定类型的所有其他HeaderItem之后呈现特定的Wicket HeaderItem

使用JavaScript中的十六进制颜色值更改颜色。

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论