How to make a footer placed below 'bottom:0' CSS?

Question

I am trying to add footer on a HTML page. The HTML then printed and the footer should be on the bottom of every page. But, I got a problem.

There's a table generated in the HTML. The table row may need 2 or more pages to be displayed. The footer on the page with the table is overlapped with the table rows. How to fix this? My plan is to make the footer placed below bottom:0, but then the footer is not even displayed. Are there any work around for this problem?

This is my footer:

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

This is my CSS for printing:

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

EDIT:
this is a fiddle : http://jsfiddle.net/88mnq8xo/

Please use fiddle code first So i can check exactly your issue. — Ashish Detroja, Oct 30 '17 at 07:20
just set a bottom margin to body on printed media so that no content overlaps the footer. — Salketer, Oct 30 '17 at 07:24
simple remove `fixed` and it will stay in the bottom by default, why adding a style since it's already in the bottom ? — Temani Afif, Oct 30 '17 at 07:35
@TemaniAfif it's need to be at the bottom of the page. If the text only printed half page, the footer isnot printed in the bottom of the page — Shota, Oct 30 '17 at 07:38
did you check this : https://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document (and not only the first answer !) — Temani Afif, Oct 30 '17 at 07:40

score 0 · Answer 1 · answered Oct 30 '17 at 08:05

First need to setup footer in bottom of the page and bottom of the content. Then wright the same code inside the @media print.

First need to work with body and html.

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

Second need to work with the footer.

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

Third need to work with @media print.

@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

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

<body>
<header></header>
<main></main>
<footer>&copy; StackOverflow 2017</footer>
</body>

Hope this will help!!!

score 0 · Answer 2 · answered Oct 30 '17 at 08:06

0

Try adding margin to the table. margin should be the same height of fixed positioned footer. Or you same amount of padding to the containing div.

answered Oct 30 '17 at 08:06

Pons Purushothaman

2,225
1
14
23

Codifier · Answer 3 · 2017-10-30T08:13:25.113

Try this instead :

you should give the fixed position a height and a width of 100%, for the body or the wrapper you can give it a padding-bottom same as the footer height.

if you dont want it to be fixed, you can change it to absolute but give it height and width. 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;
}

it's even overlapping my table higher – Shota Oct 30 '17 at 07:36 — Shota, Oct 30 '17 at 07:36

How to make a footer placed below 'bottom:0' CSS?

3 Answers3