伙计们,我遇到了打印媒体 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 页的图像,其中第一页页脚和内容重叠。内容从第一页继续到第二页。我需要为内容设置边距,这样就不会发生重叠。
最佳答案
我不确定,但我认为这对你有用。
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>
关于html - 在打印媒体(CSS)中,如何将边距设置为仅一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40738677/