印刷ページの固定ヘッダーとフッターの間のマージンを設定する方法は？

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

このスニペットは、残りのスペースをとる（可変高さを有する）固定ヘッダとフッタの例及び内容を示しています。ここでのトリックはフレキシボックスを使用することです：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>