How to print a HTML footer on every page without the body overlapping?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}

I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.

What I have is basically this:

<style>

    footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

    }

</style>

<div>

    content...

</div>

<footer>

    footer

</footer>

But when the body content is too large, it overlaps with the footer and I can't find a way around it.

I tried @page { margin-bottom: 100pt; }, but it pushes the footer up too, padding didn't work, position: running did nothing (I couldn't find whether any browser supports it).

The requisites to solve this are:

the footer needs to appear on every page on print;

the footer content can't overlap with the rest of the page;

asked Nov 16 '18 at 17:28

dcidral

13415

4

what in the world is position: running?

– dmikester1
Nov 16 '18 at 17:30

Why not put padding-bottom: 100pt; on the content <div>?

– BSK
Nov 16 '18 at 17:51

@BSK that only works on the last page (the padding-bottom starts at the closing div tag), but I need the footer to appear on every page.

– dcidral
Nov 16 '18 at 18:44

@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

– dcidral
Nov 16 '18 at 18:46

add a comment |

I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.

What I have is basically this:

<style>

    footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

    }

</style>

<div>

    content...

</div>

<footer>

    footer

</footer>

The requisites to solve this are:

the footer needs to appear on every page on print;

the footer content can't overlap with the rest of the page;

asked Nov 16 '18 at 17:28

dcidral

13415

4

what in the world is position: running?

– dmikester1
Nov 16 '18 at 17:30

Why not put padding-bottom: 100pt; on the content <div>?

– BSK
Nov 16 '18 at 17:51

@BSK that only works on the last page (the padding-bottom starts at the closing div tag), but I need the footer to appear on every page.

– dcidral
Nov 16 '18 at 18:44

@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

– dcidral
Nov 16 '18 at 18:46

add a comment |

I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.

What I have is basically this:

<style>

    footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

    }

</style>

<div>

    content...

</div>

<footer>

    footer

</footer>

The requisites to solve this are:

the footer needs to appear on every page on print;

the footer content can't overlap with the rest of the page;

asked Nov 16 '18 at 17:28

dcidral

13415

I'm trying to make the footer of my HTML to appear on every printed page without the body content overlapping the footer.

What I have is basically this:

<style>

    footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

    }

</style>

<div>

    content...

</div>

<footer>

    footer

</footer>

The requisites to solve this are:

the footer needs to appear on every page on print;

the footer content can't overlap with the rest of the page;

html css

asked Nov 16 '18 at 17:28

dcidral

13415

asked Nov 16 '18 at 17:28

dcidral

13415

asked Nov 16 '18 at 17:28

dcidral

13415

asked Nov 16 '18 at 17:28

dcidral

13415

asked Nov 16 '18 at 17:28

dcidral

13415

4

what in the world is position: running?

– dmikester1
Nov 16 '18 at 17:30

Why not put padding-bottom: 100pt; on the content <div>?

– BSK
Nov 16 '18 at 17:51

@BSK that only works on the last page (the padding-bottom starts at the closing div tag), but I need the footer to appear on every page.

– dcidral
Nov 16 '18 at 18:44

@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

– dcidral
Nov 16 '18 at 18:46

add a comment |

4

what in the world is position: running?

– dmikester1
Nov 16 '18 at 17:30

Why not put padding-bottom: 100pt; on the content <div>?

– BSK
Nov 16 '18 at 17:51

@BSK that only works on the last page (the padding-bottom starts at the closing div tag), but I need the footer to appear on every page.

– dcidral
Nov 16 '18 at 18:44

@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

– dcidral
Nov 16 '18 at 18:46

what in the world is position: running?

– dmikester1
Nov 16 '18 at 17:30

Why not put padding-bottom: 100pt; on the content <div>?

– BSK
Nov 16 '18 at 17:51

@BSK that only works on the last page (the padding-bottom starts at the closing div tag), but I need the footer to appear on every page.

– dcidral
Nov 16 '18 at 18:44

@dmikester1 w3.org/TR/css-gcpm-3/#running-syntax

– dcidral
Nov 16 '18 at 18:46

add a comment |

2 Answers
2

active

oldest

votes

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

Use z-index to your <footer> so that your body part won't overlap your footer.

Hope this helps.

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

add a comment |

You can use the CSS calc() function to calculate the appropriate height for the body by subtracting footer height from window height. With this approach, the two elements won't overlap, their positions can remain relative, and the height is automatically recalculated when resizing the window so your footer will always stay at the bottom.

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

answered Nov 16 '18 at 23:36

putipong

1809

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53342708%2fhow-to-print-a-html-footer-on-every-page-without-the-body-overlapping%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

Use z-index to your <footer> so that your body part won't overlap your footer.

Hope this helps.

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

add a comment |

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

Use z-index to your <footer> so that your body part won't overlap your footer.

Hope this helps.

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

add a comment |

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

Use z-index to your <footer> so that your body part won't overlap your footer.

Hope this helps.

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

Use z-index to your <footer> so that your body part won't overlap your footer.

Hope this helps.

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

footer {

        position: fixed;

        bottom: 5pt;

        height: 100pt;

        z-index:1000;

    }

<html>

  <head>

    <title> Page Title </title>

  </head>

  

  <body>

  

    <div>

        content...

    </div>

    <footer>

        footer

    </footer>

  </body>

  

</html>

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

answered Nov 16 '18 at 17:32

Bhavin Shah

1,85231328

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

add a comment |

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

Thanks @bhavin-shah, but that only makes the footer appear in front of the content.

– dcidral
Nov 16 '18 at 18:44

Then I think normally you would give the content div a bottom or maybe margin-bottom of 100pt so it comes right to the top of the footer.

– dmikester1
Nov 16 '18 at 19:16

add a comment |

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

answered Nov 16 '18 at 23:36

putipong

1809

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

add a comment |

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

answered Nov 16 '18 at 23:36

putipong

1809

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

add a comment |

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

answered Nov 16 '18 at 23:36

putipong

1809

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

.content {

  overflow: auto;

  height: calc(100vh - 50px); /* window height - footer height */

  padding: 0 20px;

  background-color: gray;

}



.block {

  height: 100px;

  margin-bottom: 20px;

  background-color: white;

}



footer {

  height: 50px;

  width: 100%;

  background-color: green;

}

<div class='content'>

  <span>body</span>

  

  <div class='block'></div>

  <div class='block'></div>

  <div class='block'></div>

</div>



<footer>

  <span>footer</span>

</footer>

answered Nov 16 '18 at 23:36

putipong

1809

answered Nov 16 '18 at 23:36

putipong

1809

answered Nov 16 '18 at 23:36

putipong

1809

answered Nov 16 '18 at 23:36

putipong

1809

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

add a comment |

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

I tried that, but it didn't work. I don't know how many pages the document will have, and since it is for printing I can't use vh as unit. What could work is if I could do a @page { margin-bottom: 100pt; } but excluding the footer from that rule (@page *:not('footer') {... does not work)

– dcidral
Nov 19 '18 at 13:11

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky