Question

我正在尝试在HTML页面上添加页脚。然后打印HTML，页脚应位于每个页面的底部。但是，我遇到了一个问题。

HTML中生成了一个表格。表格行可能需要显示2个或更多页面。带有表格的页面上的页脚与表格行重叠。如何解决这个问题？我的计划是将页脚放在bottom:0下方，但页脚甚至不显示。有没有解决这个问题的工作？

这是我的页脚：

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

这是我的打印CSS：

@media print {
        footer {
            position: fixed;
            bottom: 0;
        }       
    }

编辑：
这是一个小提琴：http://jsfiddle.net/88mnq8xo/

Answer 1

首先需要在页面的footer和bottom的{{1}}设置bottom。然后在content内强制使用code。{/ p>

首先需要使用@media print和body。

html

第二需要使用html{ height: 100%; width: 100%; } body{ height: 100%; padding-bottom: 100px; /* This is footer height */ position: relative; width: 100%; }。

footer

第三方需要使用footer{ bottom: 0; height: 100px; /* Footer height */ left: 0; position: absolute; width: 100%; z-index: 1; }。

@media print

HTML

@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>

*,
*:after,
*:before{
    box-sizing: inherit;
}
html{
    box-sizing: border-box;
    height: 100%;
    width: 100%;
}
body{
    background-color: #121212;
    height: 100%;
    margin: 0;
    padding: 0 0 100px;
    position: relative;
    width: 100%;
}
footer{
    background-color: #009688;
    bottom: 0;
    color: white;
    font-size: 15px;
    height: 100px;
    left: 0;
    line-height: 100px;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 1;
}
@media print{
    body{
        background-color: #121212;
        height: 100%;
        margin: 0;
        padding: 0 0 100px;
        position: relative;
        width: 100%;
    }
    footer{
        background-color: #009688;
        bottom: 0;
        color: white;
        font-size: 15px;
        height: 100px;
        left: 0;
        line-height: 100px;
        position: absolute;
        text-align: center;
        width: 100%;
        z-index: 1;
    }
}

希望这会有所帮助!!!

Answer 2

尝试在表格中添加保证金。边距应与固定定位页脚的高度相同。或者你对包含div的填充量相同。

Answer 3

试试这个：

你应该给固定位置高度和宽度100％，对于身体或包装，你可以给它一个与页脚高度相同的填充底部。

如果您不希望它被修复，您可以将其更改为绝对但是给它高度和宽度。 html：

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

的CSS：

  @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;
}

如何将页脚放在'bottom：0'CSS下面？

3 个答案: