Footer that sticks to the bottom of the page across various pages

Having trouble printing a 2-page document on Chrome. The first page has fixed content while the second page has dynamic content in an extended table.

The problem I'm facing is keeping the footer at the bottom of the second page. The CSS code below worked fine with a single page layout.

Check out the jsfiddle example: https://jsfiddle.net/c3L4eevn/

CSS

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 110px;
  font-size: 15px;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 110px;
}


@page {
  size: legal;
}

@media print {
  #hide {
    display: none !important;
  }
}

.container {
  width: 970px !important;
}

HTML

<div class="container">

    <div class="row">
        <div class="col-xs-12">
            head here
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            first page content
        </div>
    </div>
    <div class="row">
        <div class="col-xs-12">
            second page
        </div>
    </div>
</div>

<footer class="footer">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                footer here

            </div>
        </div>
    </div>
</footer>

Answer №1

This clever technique is perfect for dynamic content pages. Simply add an id to the div containing your content and insert this script:

$("#content").bind("DOMSubtreeModified", () => {     
  if ($(document).height() < screen.height - $("footer").height())
    $("footer").addClass("navbar-fixed-bottom");
  else
    $("footer").removeClass("navbar-fixed-bottom");
});

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

What steps should be followed to construct a window identical to the one depicted in the attached image using HTML and CSS?

Check out this link to see the window style I'm trying to recreate using HTML, CSS, and Javascript. No Jquery needed. Thank you in advance. ...

The hover effect is failing to impact a child element during a transition

I created a link with an arrow next to it that should move 20px to the right when hovered over, using a transition of 1s. However, for some reason the transition is not affecting the arrow. Can anyone please assist me in figuring out why this is happenin ...

Keeping JSP current with changes made to files on the client side

Currently, I am tackling a project that consists of two main components: a) A Java Application that runs on a client machine. b) A Web Application that is hosted on a web server. The Java Application generates results at random intervals. These results n ...

Impact on adjacent div

Within my code, I have two sibling divs that contain additional nested divs as shown below: <div class="btn_lists"> <div class="btn green_btn"> <img src="<?= asset_url() ?>images/escolar_07__1.png" /> </div> & ...

If the selected tab matches, collapse it using jQuery

When utilizing the jQuery accordion, I am looking to collapse if the currently active tab is selected. If I click on the same tab again, nothing happens. However, if I click on another tab, the activated tab changes accordingly. Check out an example on j ...

Tips for ensuring that the headers remain fixed in both the horizontal and vertical directions while allowing the data

I have been trying to create a table with a fixed header (meaning the header must be visible both vertically and horizontally). The table should be scrollable It should have a horizontal header The vertical header should match the horizontal header When ...

CSS properties are ineffective in scaling the image strip

I have a large image strip measuring 130560 x 1080. My goal is to load it into an image tag and use the parent div as a viewport, showing only one section of the image at a time. However, I'm encountering a problem when specifying the height and widt ...

How to apply an icon image using the background property in CSS in Vue 3

Need help setting background image from the public folder |_public | |_images | |_icon.png |_src |_components |_TheHeader.vue I'm having difficulty trying to set an image as a background in TheHeader.vue using CSS, but the image is located in ...

when the window is scrolled a certain amount, use jQuery to scroll back in the opposite direction

Using jQuery for Background Image Position: $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= 50) { $(".class").addClass("bgposi"); // $(".top").addClass("fixd"); // $(".logo").addClass ...

The vue template is indicating an error related to unused variables according to the eslint rule vue/no

Perhaps this information will come in handy for someone. I am working with a Vue template that contains HTML. <template slot="HEAD_Status" slot-scope="data"> <!-- some html without using of data --> </template> Eslint is showing [v ...

What are the steps to ensure that the content within the <pre><code></code></pre> tags displays correctly in Internet Explorer 7?

When using JQuery to make an AJAX pull with JSON to an ASP.net Web Service, the following code is used: $.ajax({ type: "POST", contentType: "application/json; charset=utf-8", url: "TestWebService.asmx/Foo", data: "{}", dataType: "json", success: function( ...

Can you target an 'input' field that is within a component conditionally rendered using 'v-if'?

Imagine this vue.js template code: <div v-if="y===0"> <input ref="textbox">{{textbox}}</input> </div> In the scenario where y is data retrieved asynchronously, Is there a way to direct focus to the 'input' element onc ...

Why use getElementById(id) to obtain an element in JavaScript when it already exists in the JS?

Recently, I have observed that a reference to an HTML element with an id can be easily accessed in JavaScript by using a variable named after that id (jsbin). What is the reason for this behavior? Why do we need to use getElementById(id) when we could sim ...

Tips for maintaining the aspect ratio of an image while ensuring it always occupies 100% width and automatically adjusts its height

I've searched everywhere but can't seem to find the right CSS solution for my problem. How can I ensure that an image always fills 100% of the height and width of the screen while maintaining its aspect ratio? .myimage { object-fit: cover; widt ...

An error has been thrown stating that the function startTimer is not defined, despite the fact that it is clearly defined

const startBtn = document.querySelector('.startBtn'); const pauseBtn = document.querySelector('.pauseBtn'); const ResetBtn = document.querySelector('.resetBtn'); const time = document.querySelector('.time'); let sec ...

How to show a button within a table cell using AngularJS?

The AngularJS application developed by my company was recently handed over to me for further development. Currently, I am working on integrating a navigation button in a table cell that will allow users to navigate to custom pages of their choice. Within ...

I created an image that can be clicked on, but unfortunately it only functions properly on the

I am currently working on creating an image that can be clicked to cycle through different images all within the same frame. While I have managed to get it to work, I am facing a limitation where it only responds to one click. count = 1; function myF ...

The child element extends beyond the boundaries of its parent container in HTML

Have you ever encountered a situation where the inner div element is wider than the outer div? It can be a bit frustrating, but there are ways to address this issue. So, what causes this to happen in the first place? And more importantly, how can we ensur ...

container dimensions for images

Is there a way to make an image adjust its size according to the container? For example, if the container is 100x100 pixels and the image within it is 90x80 pixels, can we make sure that the smaller property of the image (height in this case) adjusts to f ...

React Scroll and Material-UI button active link not functioning correctly

Whenever the link goes to the correct page, I want to add a special background effect or change the font color. Despite trying to use CSS for this purpose, it didn't work as intended. If you want to take a look at my code on codesandbox, follow this ...