Prevent the footer from overlapping with the text when printing several pages

Is there a way to prevent text from overlapping the footer when printing a page containing both?

I have tried using CSS and HTML to adjust the positioning of the footer, but it still overlaps with long blocks of text.

Any suggestions on how to fix this issue?

css

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

html

<div class="container content">
    <div class="row">
        <div class="col-2">Name</div>
        <div class="col-10">{{ name }}</div>
    </div>
    <div class="row">
        <div class="col-2">Age</div>
        <div class="col-10">{{ age }}</div>
    </div>
    <div class="row">
        <div class="col-2">Notes</div>
        <div class="col-10">{{ notes }}</div>
    </div>
 </div>


<div class="container">
    <footer class="align-items-center">
        <div class="row" style="width: 100%;">
            <div class="col-6 text-center"></div>
            <div class="col-6 text-center">Name<br>Name2</div>
        </div>
        <hr style="width: 100%;">
        <div class="row" style="width: 100%;">
            <div class="col-12 text-center">
                       Address
            </div>
        </div>
    </footer>
</div>

My attempts at setting the footer as a background image to body and adjusting margins in @page did not work as expected, as they affected the background image too. Any alternate solutions?

htmlcssbootstrap-5

Answer №1

If you want to prevent the footer from overlapping with your content, you can utilize the CSS properties break-inside and break-after. These properties serve as replacements for page-break-inside and page-break-after respectively. Check out the documentation on these properties at MDN Web DOCS and MDN Web Docs.

To add a page break before the footer on each page, you can use the following code:

footer {
  break-after: always;
  background-color: white;
}

To avoid splitting the content or element, apply the following CSS rule:

.row {
  page-break-inside: avoid;
}

If you are concerned about browser compatibility, make sure to check if the browsers used by your users support these CSS properties:

Can I use CSS break-after

Can I use CSS break-inside

Update:

An alternative approach is to utilize @media print, which I have successfully used in a project. Find more information about using @media print here.

@media print {
  footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 120px;
  }
  .container.content {
    padding-bottom: 140px; /* adjust this value to match the height of your footer plus some extra padding */
  }
}

Answer №2

The solution mentioned in this post did the trick for me. The key was utilizing the box-decoration-break property and adjusting the padding-bottom to match the height of my footer in the CSS for the main content section. Here's an example:

main {
    padding-bottom: 2cm;
    box-decoration-break: clone;
}

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

The jquery click event is not working as expected

Hey there, I've been working on creating a dropdown menu that can be activated by clicking for better usability on touch screens. $('a.dropsmall2').click(function() { $(this).next('ul').slideToggle(500,'easeInOutQuad'); ...

javascriptjquerycss

Utilizing CSS to incorporate percentage points

Currently, I am facing a challenge in implementing a vertical line with percentage marks. It needs to be positioned relative to the percentage bar, just like how it appears in the screenshot below: https://i.stack.imgur.com/CNWUV.png I attempted a basic ...

htmlcssflexbox

Is there a way to create a transparent color for the Dropdown Toggle?

As I work on expanding my understanding of HTML and Bootstrap, utilizing Bootstrap version 5.3.0 Alpha 3, I encounter an issue with the Dropdown feature. Typically, when a Dropdown is used within an element such as an icon or text, it displays an arrow sym ...

htmlcssbootstrap-5

Energetic flair for Vue animations

I am currently developing a VueJS sidebar component. The objective is to allow the parent to define a width and display a toggle button that smoothly slides the sidebar in and out. Here is an example: <template> <div class="sidebarContainer ...

javascriptcssvue.js

Deactivate interactive functions on the mat-slider while preserving the CSS styling

I'm attempting to create a mat-slider with a thumb label that remains visible at all times. Below is my mat-slider component: <mat-slider class="example-margin" [disabled]="false" [thumbLabel]="true" [tickInterval]="tickInterval" ...

javascripthtmlcssangularangular-material2

Dynamic HTML Generation using ASP.NET

Below is the code snippet that needs to be optimized: <asp:TemplateField HeaderText="Item Data"> <ItemTemplate> <%# DataBinder.Eval(Container.DataItem, "ItemData1") %> <br />&nbsp;&nbsp; <%# D ...

c#asp.nethtmldata-bindingitemtemplate

How do I use PHP to dynamically generate lists in HTML with the <li> tag?

Is there a way to repeat the <li> element in this code snippet? I have been attempting to create a loop for the "<li>" block, but it keeps showing me an error. <?php $html .= " <li> <a href=''> <span& ...

phphtmlloopsfor-loopforeach

Navigating Angular with relative paths: A guide to locating resources

Here is the structure of my app: index.html main.ts app |--main.component.html |--main.component.ts |--app.module.ts |--note.png ... etc I am trying to include the note.png file in main.component.html which is located in the same folder. I have att ...

javascripthtmlangular

Creating Functional Tabs Using CSS and JavaScript

I've been experimenting with this code snippet, trying to get it to work better. It's still a work in progress as I'm new to this and have only customized it for my phone so far. The issue can be seen by clicking on the Projects and Today ta ...

javascriptjqueryhtmlcss

Is there a way to automate testing for my web application bundled with webpack against FUOC?

After creating a React + Redux web app bundled with webpack, I encountered a bundling error that caused my website to display flash of unstyled content (FUOC) behavior. Certain components did not inject their CSS into the server response, resulting in pa ...

cssnode.jstestingwebwebpack

"Enjoying a table header that scrolls freely with autoscroll feature

Resolved - http://jsfiddle.net/CrSpu/11704/ I'm facing an issue with a table that has autoscroll functionality. I am looking to freeze the header of the table when automatic scrolling occurs, or you can test it out using my code pen. I'm uncer ...

javascriptjquerycsshtml-tableautoscroll

Difficulty with aligning textfield controls to the right

I'm currently working on adding StaticTextField controls to a page. We are using ExtJS, but we incorporate VB.NET methods for implementing ExtJS so manual coding isn't necessary. So far, I attempted to align the text to the right by using this c ...

asp.netcssasp.net-mvcvb.netextjs

What steps can be taken to confirm that a comment posted on a specific post is genuine and related to that post?

Currently, I am immersed in the world of AJAX, PHP, and MySQL. Below is a snippet of my PHP code: if(isset($_GET['postTextComment'])){ // The text of the comment $htpc = htmlspecialchars($_GET['postTextComment']); // ID of ...

phpjqueryhtmlmysqlajax

What is the easiest way to update the border color of a radio button in Material-UI?

I am looking to customize the appearance of the outer ring on Material UI radio buttons. https://material-ui.com/components/radio-buttons/ Currently, my radio button looks like this: https://i.stack.imgur.com/o67mN.jpg However, I would like it to look ...

cssreactjsmaterial-ui

What is the best way to eliminate the space between two buttons in a table row or "column"?

Below is the code snippet that I am working with. I am trying to figure out a way to eliminate the space between the buttons both horizontally and vertically. Can someone guide me on how to achieve this? <%@page contentType="text/html" pageEncodin ...

htmlcssbuttonspacing

What is Microsoft's equivalent to an embedded Java web applet?

Is there a Microsoft alternative to embedded Java web applets? Can you provide an example from the internet? Furthermore, why is ajax prevalent in dynamic web development compared to embedded applications? ...

javahtmlajaxweb-applications

Experiencing issues with a malfunctioning Chrome extension? The CaptureVisibleTab feature seems to be failing when using

Whenever I try to use the captureVisibleTab function on a page where I have a div with preserve3d in CSS3, all I see is a blank page. How can I solve this issue? Here is my simple code for capturing the browser screen: chrome.browserAction.onClicked.addL ...

google-chromecssgoogle-chrome-extension

I'm having trouble with my sticky position in the code. I tried setting it to the left side, but it's not behaving as

While I am delving into Bootstrap, HTML, and CSS to enhance my skills, I have hit a snag. My intention was to make the sidebar sticky but it seems to stubbornly stick to the left instead. Despite attempting to apply "position: sticky" and setting "left: 0" ...

htmlcsscss-positionbootstrap-5

Allowing CSS to break long words but not spaces for better readability

Imagine you have the following paragraph: thisisaverylongwordthatneverbreaks Applying word-wrap:break-word; results in: thisisaverylongwordthat neverbreaks This works well, but what if I try: this is avery long word that has spaces The output becom ...

cssline-breaks

Obtain a unique HTML ID dynamically with Selenium and VBA

I am currently working on automating a web form using Selenium and VBA. The form includes a search box that generates an autogenerated list when a value is entered. While I can successfully input a value into the search box and trigger the javascript to cr ...

javascripthtmlcssselenium-webdriver