在打印媒体（Css）中，如何将保证金设置为只有div？

Question

Hye伙计们，我正面临着印刷媒体css的问题。 html页面中有两个div，body＆amp;页脚。

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

在打印网页时，我需要将页脚固定在每页的底部。所以，我使用了以下css＆amp;它运作良好。

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

对于身体部位，我使用margin-bottom设置页边框边框和下面的css。为了避免与页脚重叠，但它没有奏效。

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

我的问题是，如何设置＆＃39; main-template-body＆＃39; div＆amp;打印页面底部边框以避免正文与页脚div重叠。

以下css为Body＆amp; amp设置了保证金。页脚。

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

先谢谢你们。

编辑：我更新了下面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>