How can we apply position: fixed in print media queries using CSS?

In order to display a footer on every printed page, we have implemented the use of position: fixed. However, one issue that has arisen is that content ends up flowing underneath the footer. Is there a solution to prevent this from happening while still keeping the footer in place?

Answer №1

body {
  margin: 0;
}
.content {
  padding: 30px;
  font-size: 18px;
  background: #ccc;
  padding-bottom: 60px;
}
footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #f89;
}
footer div {
  padding: 20px;
}
.last-content {
  color:red;
}
<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec luctus ex odio, in bibendum odio aliquam nec. Phasellus suscipit in mi eget pretium. Etiam pellentesque est ac nunc ullamcorper dapibus. Maecenas viverra tristique erat, ac fringilla est placerat a. In non porta metus. Integer tincidunt mollis quam, ut vestibulum orci tempor eu. Vestibulum rutrum est vitae porta tristique. Fusce dui libero, luctus et leo quis, euismod tincidunt ex. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Quisque ut fringilla felis.

Nulla at erat nulla. Aenean ut elementum sem, sed fringilla neque. Quisque dolor dui, varius eget tempus vitae, scelerisque interdum lectus. Suspendisse ut ante maximus, accumsan urna at, vehicula purus. Aenean auctor justo in viverra varius. In malesuada, turpis egestas aliquet mollis, magna nisi dignissim libero, vitae bibendum elit risus ut eros. Aenean quis metus eget odio egestas ornare. Maecenas malesuada nulla ligula, ut sagittis est finibus eget. Donec nec ullamcorper nunc. Fusce elementum urna et neque aliquet volutpat. Morbi convallis luctus facilisis.

Suspendisse et ipsum nec odio maximus placerat eget in nisi. Vivamus gravida, velit non euismod mollis, nisi lectus sodales leo, et elementum odio elit quis lectus. Ut efficitur vitae neque in malesuada. Nam varius malesuada metus, id lobortis orci ultrices vitae. Duis iaculis libero eu metus feugiat consectetur. Maecenas scelerisque et turpis at ultrices. Morbi vehicula eu dolor eget porttitor. Maecenas leo enim, tempus vel mi ut, eleifend venenatis ante. Proin id aliquam metus. Nullam non lorem ut odio molestie finibus pharetra ullamcorper enim.

Aliquam egestas purus libero, et lacinia nisl semper at. Integer a ornare orci. Pellentesque porta, purus nec consectetur sollicitudin, nunc lectus tincidunt eros, a dictum libero augue et elit. Integer quis ultricies lectus. Nunc eu eros venenatis, euismod mi at, maximus augue. Vestibulum ut aliquam neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus scelerisque velit ante, id tempus quam auctor nec.

Integer vitae nibh id ipsum ultrices hendrerit. Maecenas tempus arcu enim, aliquam feugiat mauris finibus sit amet. Quisque elementum risus eros, tincidunt suscipit velit fermentum ac. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras nec fermentum quam. Integer quis tempus nunc. Curabitur in massa ac lorem pellentesque porta. Phasellus finibus lorem est, at cursus sem imperdiet at. Cras nunc lacus, dictum vitae finibus et, porttitor id nisi. Integer bibendum imperdiet urna, eget sollicitudin erat <span class="last-content">last content</span>
</div>
<footer>
  <div> here is footer block </div>
</footer>

When using the CSS property of position fixed, remember to add margin-bottom for the main block (parallel block before the footer) with a value equal to the height of the footer. margin-bottom should be equal to the height of the footer.

Answer №2

.content {
  margin-bottom: 50px;
  /*setting the same height as the footer*/
}

.footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: yellow;
}
<div class="content">
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p>CONTENT</p>
  <p style="color: red">BOTTOM CONTENT</p>
</div>
<div class="footer">
  FOOTER
</div>

Answer №3

It appears that the content is disregarding the footer block and displaying beneath it in some way.

Consider incorporating display: inline-block; into your CSS to ensure the footer occupies a complete line without being overlapped.

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

Utilizing jQuery to Bind AJAX Events without a DOM Element

The documentation for jQuery AJAX Events provides examples that all involve using a jQuery DOM Element to declare a binding, like so: $('.log').ajaxSend( hander ); I am interested in capturing jQuery AJAX Events without the need for a DOM Eleme ...

Error with AngularJS: IE not showing dropdown options for MultiSelect

My application features a multiselect dropdown menu that shows a list of countries. While this dropdown functions correctly in Chrome, it displays options differently in IE as shown below: https://i.stack.imgur.com/xhOmV.png I have attempted to adjust th ...

Store Dark Mode preferences in the browser's local storage using React and Material-UI

Is there a way to save the dark mode setting in localStorage? Can this approach be used for storing it? Any suggestions on how to achieve this would be appreciated. Thanks, cheers! function App() { const [darkState, setDarkState] = useState("&qu ...

What is the best way to re-render a component immediately following an update in React?

As I attempt to change the color of a bar to green and then back to black, it seems like the latter color update is taking precedence in my code. const [color, setColor] = useState("black") const bubbleSort = async () => { const sleep = ms => ...

Form in HTML with Automatic Multiplication Functionality in pure JavaScript

I'm struggling with integrating a simplified HTML form with JavaScript to dynamically adjust and multiply the entered amount by 100 before sending it via the GET method to a specific endpoint. Below is the HTML form: <body> <form method= ...

A Vue button that toggles between three states depending on the value in an array

In my Vue project, I am working on loading an array when the page loads. I need to check the status of each line item in the array and display a specific button for each status using a 3-way toggle. Although I believe I understand the main concept, I am s ...

Harvesting the local image file

Currently, I have implemented a form that allows users to upload images and crop them. The process flow has been established as follows: 1. User uploads the image 2. Server processes the image and sends it back to the browser 3. User crops the image a ...

Aligning content in a div with proportional elements, maintaining left alignment of the elements

Trying my hand at creating an HTML template to display TV shows as cover artwork. The layout is flexible, showing up to five shows per row on larger screens and a minimum of two on smaller screens like smartphones. It's been a while since I've wo ...

Utilizing CSS for fixed positioning and media queries

I'm currently facing an issue with media queries and a sidebar div that has a fixed position. The problem arises when the viewport becomes too narrow, causing the main content to shift to the left and end up below the sidebar. I attempted to resolve t ...

The left and right edges are not extending across the entire screen

Can anyone help me determine if this is a duplicate issue? I'm unsure why my left and right borders are not extending the full width of the screen. The website in question is ojs.monojitbanerjee.co.cc Here is the structure: <body> <div id= ...

Is it possible to attach a Vue component to more than one div element simultaneously?

import Selector from '@components/contactSelector' let vueInstance = new Vue({ components: { Selector }, data () { return { url: url, isFilter: false, type: 'external', selectedList: [] } }, rende ...

I'm feeling pretty lost when it comes to understanding how line-height and margins work together

When creating a webpage layout, my goal is to maintain balance by ensuring there is an equal amount of spacing between sections and elements. However, when dealing with varying font sizes and line heights, achieving this can be challenging. To provide fur ...

Preserve HTML client control values during page reloads

Is there a more efficient way to retain client-side HTML controls on postback? I've attempted using enableviewstate="true", but it didn't work. My current workaround involves creating a server-side function that resets all posted values using Cli ...

When a child component is updated, React does not automatically re-render

My goal is to pass the email from the SigninForm back to the App component and trigger a re-render when the email is updated. I attempted to follow the structure outlined in a previous question on Stack Overflow, but unfortunately, I couldn't get the ...

What is the best way to implement colorful opening hours in code?

I found this code on a different platform and decided to tweak it to display only Monday - Friday, Saturday, and Sunday. However, I'm stuck trying to update the Javascript code to match my modifications. Any help would be appreciated! You can view th ...

When I engage with the input field, it ceases to be in focus

Here is the code I've been working on: https://github.com/Michael-Liendo/url-shortener/blob/main/src/pages/index.js If you want to see the issue for yourself, check it out at: ...

A guide on grouping an entire CSS file under one class umbrella

Is there a way to encapsulate a large number of CSS declarations so they only apply when the parent has a specified class? div { color: #ffffff; } ... a { color: #000000; } Can it be structured like this, with a parent class containing all the CSS r ...

Tips for incorporating user access control logic into a lazy-loaded Angular Monorepo application without embedding the logic in the main application

In our current project, we are developing an Angular application utilizing the Angular monorepo structure. This setup includes a parent application and several children applications, with the parent application located in the `app` folder and the children ...

Route functions cannot be hoisted in the Express framework

Can someone shed light on why my Express routes aren't hoisted? I keep encountering this error: throw new TypeError('Router.use() requires middleware functions'); The error is not present in the following file: var express = requir ...

A few of the input fields I filled out are not getting sent to the PHP script

Currently, I am working on a school project that involves creating a website similar to IMDB. My task is to include comments in our database, but I am facing an issue where two fields (fid and spoiler) are not getting posted to the PHP script handling the ...