Tips for adding a footer to the bottom of each page

Is it possible to add a footer at the end of every page after a page-break in HTML?

Let's take a look at the HTML code that demonstrates this feature:

<html>
<head>
 ...
 <style>
  .container {
    width: 695px;
    height: 1022px;
    display: flex;
    flex-direction: column;
    margin: 10px;
    padding: 40px;
    color: #495057;
    letter-spacing: 1px;
  }
  .footer{
   position: absolute;
   bottom: 0;
   width: 100%;
   background-color: red;
   text-align: center;
   page-break-after: always;
  }
 </style>
</head>
<body>
 <div class="container">
 ...
 </div>
 <div class="footer">
 ...
 </div>
<body>
</html>

In the current output, the footer appears only on the first page. However, it is desired for it to also appear on subsequent pages after page-breaks.

htmlcss

Answer №1

If you want to include a footer on your web pages, you can utilize csi.js. Simply add the csi.min.js file to the <head> section of your HTML document and create a separate footer.html file that includes the necessary footer content.

To ensure the footer is displayed on every page where you want it to appear, add the following code snippet at the bottom of each page:

<body>
 //Your page
 <div data-include="footer.html"></div>
</body>

Edit:

As mentioned in their readme, consider adding the following configuration settings to include different elements in your footer design:

   "footer": {
    "height": "28mm",
    "contents": {
      first: 'Cover page',
      2: 'Second page', // Any page number is working. 1-based index
      default: '<span style="color: #444;">{{page}}</span>/<span>{{pages}}</span>', // fallback value
      last: 'Last Page'
    }
  },

Make sure to adjust these values according to your specific requirements for the footer layout.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Struggle between Internet Explorer 8 and its border and margin problems

Having a trouble with styling on our company's intranet specifically in IE8 or lower. The border and padding are showing up despite using border:none;, margin:0!important;, and padding:0!important;. This is causing the content to shift to the right an ...

htmlcssiframeinternet-explorer-8

Tips for applying and removing classes using an anchor tag

When I click on an anchor, I want it to add a specific class. This is my current markup: <ul> <li> <a href="<?php echo base_url()?>home/promos/call" class="promo-call"></a> </li> ...

javascriptjquerycssjquery-mobile

Is there a way to modify the color of the text within the Link tag of the react-router in a react component?

Struggling to modify the text color in my Navbar component within the Link tag of react-router-dom, but it's stubbornly refusing to change. Utilizing styled components Beneath is the complete code for my navbar component import React from 'reac ...

cssreactjsstyled-components

The Django framework does not apply color to the Bootstrap Navbar as expected

I'm currently working on building an E-Commerce Website using Django. I have implemented a Bootstrap navbar, but the CSS styles that I obtained from this source are not functioning properly when placed within the {%block css %} tag. I have attached t ...

htmlcssdjangobootstrap-4

CSS: Create a form with two input fields where the left field is adjustable in width and the right field fills up

------------- -------------------------------------------------- | some unique text | | some more original content, varying length | ------------- -------------------------------------------------- |<---------------------- 100% width ------------------ ...

css

Update the button appearance with a Strikethrough effect using JavaScript

I'm working on a web application that allows users to create to-do items. My goal is to have the text field be crossed out when the checkbox is checked. When the "add todo" button is clicked, a new item is generated in JavaScript. Then, if the checkb ...

javascriptcssnode.jsstrikethrough

Increment counter when a key is pressed in Angular 4 and decrement when the backspace key is pressed

As a beginner in Angular, my goal is to create a feature where: The character count in a label increases as text is entered into a textarea. When the backspace key is pressed, the counter should decrease. If the user attempts to enter more characters tha ...

htmlangular

Why does the script source direct me to localhost:5000?

https://i.sstatic.net/X0TKs.png Hello fellow developers! I've encountered an issue while attempting to keep my javascript file separate from my .ejs files. Despite pointing my script tag to "../client/index.js," which is the correct location of the f ...

javascripthtmlnode.js

The footer should remain at the bottom of the page without being permanently fixed

Is there a way to keep the bootstrap footer at the bottom without fixing it in place? In the code example below, the footer should always appear at the bottom. The white space after the footer should come before it. Using sticky-bottom achieves this, but ...

javascriptcsstwitter-bootstrapbootstrap-4footer

Verifying element presence in Python with Selenium

My current task involves navigating through a website one page at a time by clicking on the element labeled next, identified in the HTML code as class="pg-next". As I progress, I anticipate reaching the end of the website, where the next element will no lo ...

pythonhtmlselenium

Unexpected issue with Ionic 4 subarray returning as undefined even though the index is accurate

When attempting to use console.log to view the value, I noticed that the value of noticeSet2[index] is undefined. However, when I print noticeSet, all the data in the array is displayed. Additionally, after printing the index using console.log, it correctl ...

javascripthtmltypescriptionic-frameworkionic4

The templateUrl feature is not functioning properly following the minification process

I recently created a website using yeoman angular-fullstack. Everything was going smoothly until I tried to minify the project. Most of it worked fine, except for a popup dialog that refused to work. After some troubleshooting, I discovered that the issue ...

javascripthtmlangularjsgruntjsminify

Missing 'id' property in ngFor loop for object type

I'm currently learning Angular and I've been following a code tutorial. However, despite matching the instructor's code, it doesn't seem to be working for me. When I try to compile the following code, I receive an error message stating ...

htmlangularngfor

What is the best way to transfer this data within a ReactJS application?

While using ReactJS with Bootstrap's carousel design, I came across this specific line: <div class="tns-carousel-inner" data-carousel-options="{&quot;mode&quot;: &quot;gallery&", &quot;responsive&&quo ...

htmlreactjsbootstrap-4carouselreact-bootstrap

Incorporating JSON data into an HTML table

Looking to populate an HTML table with JSON data, but struggling with parsing and appending the data correctly. Can anyone provide guidance or assistance? <!DOCTYPE html> <html> <head> <title>JSON Demo</title> < ...

javascripthtmljson

When adding a border radius to an iframe, you'll notice delicate curved lines appearing on all four corners

I have implemented material UI's CardMedia component to display an Iframe with a embedded youtube link. To achieve rounded corners for the iframe, I set the border-radius to 30px. Although it successfully rounds the corners, it also introduces thin li ...

cssmaterial-uilinethinborder-radius

Even if the width is not set to 100%, the div still breaks into a new row

Having an issue here. I'm working with 2 divs that should be displayed side by side. Both are enclosed in a div with max-width : n. I set width: 70% to the first div and width: 30% to the second div, expecting them to fully occupy the parent div. H ...

htmlcss

Creating a Fixed Footer with CSS

Another question on the same topic, with a twist. Despite trying various solutions found in countless articles, none seem to work for me. My familiarity with HTML/CSS is limited due to just a few months of off-and-on practice. Hence, I'm seeking help ...

css

Switch Between More and Less Text - Implement Smooth Transition on Shopify Using Javascript

I recently implemented a More/Less toggle button using resources from this website. The functionality is there, but I now want to add a smooth transition effect. When the user clicks on "read more," I would like the hidden content to gradually appear, and ...

javascripthtmljqueryshopify

There seems to be an issue with the AngularJS ng-click function not functioning properly

I'm attempting to insert a link tag with a filter into an HTML content. The HTML content is bound using ng-bind-html and the link tag includes an ng-click directive. However, I'm facing an issue where the ng-click function is not functioning. He ...

htmlangularjsangularjs-ng-clickng-bind-html