html - 在打印媒体(CSS)中，如何将边距设置为仅一个 div？

Question

伙计们，我遇到了打印媒体 CSS 问题。 html页面中有两个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; 
}

对于正文部分，我使用 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>