印刷媒体（Css）では、divのみに余白を設定する方法はありますか？

Question

ええ、みんな、私は印刷媒体のCSSに直面している。 htmlページには、ボディ&フッターの2つのdivがあります。

<div class="main-template-body" id="main-template-body"> 
    //content 
</div> 
<div class="main-template-footer"> 
    //footer 
</div> 

ウェブページを印刷しているうちに、すべてのページの下部にフッターを固定する必要があります。だから、私は&のCSSを使ってうまくいきました。

.main-template-footer { 
     display:block; 
     position:fixed; 
     bottom:0; 
     width:100%; 
     min-height:50px; 
     height:auto; 
} 

ボディ部分には、次のCSSを使用してページの下端に余白を設定するために余白を使用しました。フッタとの重複を避けるために、しかしそれはうまくいきませんでした。

.main-template-body { 
    width:100%; 
    height:auto; 
    display:block; 
    position:relative; 
    //margin-bottom: 20px; tried 
    //margin-bottom : 2cm; tried it too 
} 

私の質問は、私はフッターのdivと体の重複を避けるために、&印刷ページ下の枠線をDIV「メインテンプレート-体」の間のマージンを設定する方法、です。

次のCSSは、ボディ&フッターの両方にマージンを設定しています。

@page { 
    margin-bottom: 4cm;//<- How to set this margin to specific div only? 
} 

ありがとうございました。

編集：下の2ページの画像を更新しました。最初のページのフッターには、&のコンテンツが重複しています。コンテンツは、最初のページから2ページ目まで続きます。私はコンテンツにマージンを設定する必要があるため、オーバーラップは起こりません。

Answer 1

私はわからないが、私は、これはあなたのために有用であると考えています。

html, body{ 
 
     height: 100%; 
 
     margin: 0; 
 
    } 
 
    .main{ 
 
     min-height: 100%; 
 
     position: relative; 
 
    } 
 
    .main-template-footer { 
 
     height: 50px; 
 
     bottom: 0; 
 
     position: absolute; 
 
     width: 100%; 
 
    } 
 
    .main-template-body { 
 
     padding-bottom: 50px; 
 
    }

<div class="main"> 
 
    <div class="main-template-body" id="main-template-body"> 
 
     //content 
 
    </div> 
 
    <div class="main-template-footer"> 
 
     //footer 
 
    </div> 
 
</div>