Javascript 如何在'；底部：0'；CSS？_Javascript_Jquery_Html_Css

Javascript 如何在'；底部：0'；CSS？

javascript jquery html css

Javascript 如何在'；底部：0'；CSS？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在HTML页面上添加页脚。然后打印HTML，页脚应位于每页的底部。但是，我有个问题 HTML中生成了一个表。表格行可能需要显示2页或更多页。表所在页面的页脚与表行重叠。如何解决这个问题？我的计划是将页脚放在底部：0的下方，但之后页脚甚至不显示。有解决这个问题的办法吗这是我的页脚： <footer> <div class='div_footer'> <?php echo "This is footer"; ?> </div> </foo

我试图在HTML页面上添加页脚。然后打印HTML，页脚应位于每页的底部。但是，我有个问题

HTML中生成了一个表。表格行可能需要显示2页或更多页。表所在页面的页脚与表行重叠。如何解决这个问题？我的计划是将页脚放在

底部：0

的下方，但之后页脚甚至不显示。有解决这个问题的办法吗

这是我的页脚：

<footer>
<div class='div_footer'>
<?php echo "This is footer"; ?>
</div>
</footer>

编辑：
这是一把小提琴：

试试这个：

您应该为固定位置指定100%的高度和宽度，对于主体或包装，您可以为其提供与页脚高度相同的填充底部

如果您不希望它是固定的，您可以将其更改为绝对值，但可以指定其高度和宽度。 html:

首先需要在页面的

底部和内容的底部设置footer
。然后在@media print
中写入相同的code

首先需要使用body
和html
第二，需要使用页脚
第三，需要使用@media print
HTML

&抄袭；StackOverflow 2017
尝试在表格中添加边距。页边距应与固定定位页脚的高度相同。或者在包含的分区中添加相同的填充量。
请先使用FIDLE代码，以便我可以准确地检查您的问题。只需在打印介质上为body设置一个底部边距，以便没有内容与页脚重叠。@AshishDetroja我将尝试添加一个简单的删除修复，默认情况下它将保留在底部，既然样式已经在底部，为什么要添加它？@TemaniAfif它需要在页面底部。如果文本只打印了半页，页脚就不会打印在页面底部，甚至与我的表格重叠。higheri做了一些更改。
@media print {
        footer {
            position: fixed;
            bottom: 0;
        }       
    }

<html>
<body>
  <div class="wrapper">
<div class="row" style="margin:0 1cm 0cm 1cm" id="div_print">
.
.
.
 </div> 
   <footer></footer>
  </div>
</body>
</html>

  @media print {
    footer {
                position: fixed;
                bottom: 0;
                height:40px;
                background-color:#000;
                width:100%;
                left:0;
                padding-left:22px;
                color:#fff;
            }       
}

body,html{
  min-height: 100%;
  position: relative;
}
.wrapper{
  position: relative;
  width:100%;
  padding-bottom:80px;
}

html{
    height: 100%;
    width: 100%;
}
body{
    height: 100%;
    padding-bottom: 100px; /* This is footer height */
    position: relative;
    width: 100%;
}

footer{
    bottom: 0;
    height: 100px; /* Footer height */
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1;
}

@media print{
    body{
        padding-bottom: 100px; /* Footer height */
        position: relative;
    }
    footer{
        bottom: 0;
        height: 100px; /* Footer height */
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 1;
    }
}

<html>
    <body>
        <header></header>
        <main></main>
        <footer></footer>
    </body>
</html>