在印刷媒体（Css）中，如何将边距设置为仅一个 div？

Question

大家好，我正面临印刷媒体 css 的问题。 html页面中有两个div，body和footer。

<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; 
}

对于正文部分，我使用了 margin-bottom 来设置页面底部边框的边距，并带有以下 css。为了避免与页脚重叠，但它没有工作。

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

我的问题是，如何设置'main-template-body' div 和打印页面底部边框之间的边距以避免正文与页脚 div 重叠。

以下 css 将边距设置为正文和页脚。

@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>