代码之家 › 专栏 › 技术社区 › Gaurav_soni

打印时分区重叠

css html

0

Gaurav_soni · 技术社区 · 6 年前

当我打印以下代码时,绿色页脚与黄色容器重叠。我需要黄色在打印时遇到页脚时断开并转到下一页。

HTML如下

<body>
    <div class="container">
            This is the container
    </div>
    <div class="footer">
        This is the footer
    </div>
</body>

CSS如下

body{
    height: 100vh;
    margin: 0;
    -webkit-print-color-adjust:exact;
}

.container{
    background-color:yellow;
    width: 100%;
    height: 1500px;

}

.footer{
    position: fixed;
    bottom: 0;
    width: 80%;
    height: 100px;
    background-color: #21f50056 
}

1 回复 | 直到 6 年前

1

0

Gaurav_soni 6 年前

最后使用了javascript,在添加任何元素之前,我检查了容器的高度。如果高度超过了页面高度,请插入分页符。

推荐文章

Jamie · 在CSS链接的文件名中添加Jinja占位符

4 月前

Mass · 如何在Tailwind CSS v4中创建配置

4 月前

magenta placenta · 将css变量合并为一个变量

4 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

5 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

5 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

5 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

5 月前

Ben Halicki · 带有垂直和水平滚动条的表,使用HTML/CSS/Bootstrap-5固定行和列

5 月前

Luckkks · 过渡色工作不正常

5 月前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

5 月前

关于移动版

代码之家 - 一站式码农服务社区

沪ICP备11025650号