Question

我有一个容器div，其中包含四个div：

<div id="container">
    <div id="top"> this is top div</div>
    <div id="middle1"> this is middle1 div</div>
    <div id="middle2"> this is middle2 div</div>
    <div id="footer"> this is top div</div>
</div>

当我打印此html时，我想将页脚div仅放在我打印的最后一页的底部。

这是我的媒体查询：

@media print {
    #container{
        position:relative;
    }
    .middle1{
        display:inline-block;
    }
    .middle2{
        display:inline;
    }
    #footer{
        position:fixed;
        bottom:0;  
    }            
}

但是这会将页脚div放在每页的底部。我只想在最后一页的底部显示页脚div。

Answer 1

以下是解决方案：将页脚的position: fixed;更改为position: absolute;。你应该阅读this article。

@media print {
    #container{
        position:relative;
    }
    .middle1{
        display:inline-block;
    }
    .middle2{
        display:inline;
    }
    #footer{
        position:absolute;
        bottom:0;  
    }            
}

为什么position: absolute;？

因为

1） #container为relative因此#footer为absolute，但 {{1} } relative（#container为#container）

2）由于position: relative;为#footer所以使用bottom:0;我们确保position:absolute;始终位于#footer的底部}。

仅使用打印介质查询在最后一页放置div

1 个答案: