html - 如何在打印页面中设置固定页眉和页脚之间的边距？

Question

在我的 html 中，页眉和页脚是固定的，但正文内容与页眉和页脚重叠。我想在页眉和页脚之间不重叠地显示我的内容。如何实现？

请帮我解决这个问题。我正在使用下面提到的 CSS 代码。 您可以检查一下并解决此问题。

<style type="text/css">
        @media print {
            #header {
                display: table-header-group;
                position: fixed;
                top: 0;
                left: 0;
                margin: 0px;
                padding: 0px;
                width: 100%;
            }

            #body {
                /*position: absolute;
                height: 80%;
                margin-top: 0em !important;
                margin-bottom: 1em !important;
                padding: 2em 0 0 0;
                margin:0 auto;*/
                position: absolute;
                margin-top: 10% !important;
                margin-bottom: 5% !important;
                height: 80%;
                overflow: visible;
                text-align: justify;
                width: 90%;
            }

            #footer {
                display: table-footer-group;
                position: fixed;
                bottom: -0.6em;
                left: 0;
                margin: 5em 0px 0px 0px;
                padding: 0px;
                width: 100%;
                /*clear:both;*/
                /*padding-top:98%;*/
                /*padding-bottom:1em;*/
                /*page-break-after: avoid;*/
            }
        }



        @media screen {
            #thead {
                display: block;
                /*padding-right: 5.9em;
                padding-left: 6px;*/
                width: 100%;
                /*height: 5%;*/
            }

            #tbody {
                display: block;
                /*height: 80%;
                vertical-align: central;
                padding-top: 5em;
                padding-bottom: 3em;*/
                text-align: justify;
                width: 100%;
                margin-top: -5em;
            }

            #tfoot {
                display: block;
                /*padding-right: 6em;
                padding-top: 2em;*/
                width: 100%;
                /*height: 4%;*/
            }
        }
    </style>

Answer 1

此代码段显示了固定页眉和页脚(具有可变高度)和占用剩余空间的内容的示例。这里的技巧是使用 flexbox:https://css-tricks.com/snippets/css/a-guide-to-flexbox/

body {
  overflow: hidden;
}

.content-container {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

#header {
  position: relative;
  width: 100%;
  background-color: green;
}

#body {
  position: relative;
  width: 100%;
  background-color: blue;
  overflow: auto;
}

#footer {
  position: relative;
  width: 100%;
  background-color: red;
}

<div class="content-container">
  <div id="header">
    <div style="height: 40px;"></div>
  </div>

  <div id="body">
    <div style="height: 1000px;"></div>
  </div>

  <div id="footer">
    <div style="height: 20px;"></div>
  </div>
</div>