我想打印30页,其中一些数据位于顶部,一些数据位于底部.
我的代码看起来像:
我的代码看起来像:
<...> <div style="page-break-after: always"> <div>This should be on top1</div> <div>This should be on bottom1</div> </div> <div style="page-break-after: always"> <div>This should be on top2</div> <div>This should be on bottom2</div> </div> <etc>
我尝试了一切:
>位置:相对(无变化),绝对(仅限第一页页脚),固定(仅限最后一页)
>将html,body,每个div高度设置为100%.没有想法我为什么要这样做.没有改变什么
解决方法
终于找到了答案:
> html,身体必须有高度:100%;
>应该有两种类型的div:外部(页面大小),页脚
>对于两个设置显示:块;
>对于外部设定高度:100%;位置:相对;
>对于内部设定位置:绝对;底部:0px;
瞧!
这是我的完整代码:
<!DOCTYPE HTML> <html lang="en-US"> <head> <style> html,body { height: 100%; margin: 0px; } body > div { height: 100%; display: block; position: relative; } body > div > div { position: absolute; bottom: 0px; left: 0px; } </style> </head> <body> <div> Page1 <div>Page1Footer</div> </div> <div> Page2 <div>Page2Footer</div> </div> <div> Page3 <div>Page3Footer</div> </div> </body> </html>