仅使用打印媒体查询将 div 放置在最后一页

【问题标题】：To place a div at the last page only using print media query仅使用打印媒体查询将 div 放置在最后一页
【发布时间】：2015-05-20 22:02:23
【问题描述】：

我有一个容器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。

【问题讨论】：

把footer div放在containe后面试试。
那么当你打印 html 时会发生什么？？
页脚显示在每个打印页面的底部@junaid

标签： html css media-queries

【解决方案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，但是 relative 到 #container （如 @987654332 @是position: relative;)

2) 因为#footer 是bottom:0;，所以使用position:absolute; 我们确保#footer 始终保持在#container 的底部。

【讨论】：