Creating a Fixed Header and Footer in HTML When Content Exceeds a Specific Height

Imagine an HTML template with the following structure:

-------------
|Header Data|
-------------
|           |
| Main Data |
|           |
-------------
|Footer Data|
-------------

The Header Data, Main Data, and Footer Data sections have fixed height values.

But what if the content in the Main Data section exceeds its fixed height? Can we make it look like this instead?

-------------
|Header Data|
-------------
|           |
| MainData1 |
|           |
-------------
|Footer Data|
-------------
-------------
|Header Data|
-------------
|           |
| MainData2 |
|           |
-------------
|Footer Data|
-------------

Is it achievable using only HTML and CSS?

javascripthtmlcss

Answer №1

When designing for @media screen, it is recommended to utilize a single <header> and <footer> with scrollable content in between.

For @media print, the traditional approach (which has always been effective) was to encapsulate everything within a <table> and use <thead> and <tfoot> elements with display values set as table-header-group and table-footer-group respectively.

However, the current solution for @media print involves utilizing running elements:

header {
  position: running(header);
}

footer {
  position: running(footer);
}

@page {
  @top-center {
    content: element(header);
  }
  @bottom-center {
    content: element(footer);
  }
}

For more information on implementing the @page model, please consult the official documentation. Keep in mind that its current global browser support slightly falls below 80%, as indicated by usage statistics.

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

Tips for properly formatting Sequelize association fetching in your application

I am dealing with an association many-to-many between two tables, products and orders. In the pivot table, I store the product's id, quantity, and price. However, when fetching the product, I also require the product name which can only be retrieved f ...

javascriptnode.jssequelize.js

What is the best way to organize hundreds of unique select names and their corresponding selected options in an object using key-value pairs?

I have a dynamic table of data displayed on a webpage in table format, with various select tags that change based on the number of applications. The table structure is shown in the image linked below: IMAGE LINK: https://ibb.co/RCYwchv Each select tag ha ...

javascriptphpjqueryhtml

What is the best method for accessing a specific Data value on the route?

Hello everyone! This is my first time posting on Stack Overflow. I am currently working on developing an attendance management system for a school. In my database tables, I have the following fields: Registration: class_id, section_id, user_id. Attendanc ...

javascriptphplaravellaravel-5drop-down-menu

Adjust the body class dynamically based on the URL in AngularJS

Here is the link to my website To Log In - http://localhost/ang/#/login To Access Dashboard - http://localhost/ang/#/dashboard See below for the HTML code for the body tag If the current URL is http://localhost/ang/#/login, then the body should include ...

javascriptphpjqueryangularjs

Prevent users from inserting images from their desktop into the HTML by disabling

While working on a HTML5 drag and drop image uploading feature, everything was going smoothly. I had a small div in the HTML with a JavaScript event handler set up like this: $('#uploader').on('dragover', function(e){ ... }).on(&apos ...

javascripthtmldrag-and-drop

Automatically shift focus after being focused on

I recently created a piece of jQuery code for a mobile website. Whenever I tap on the delete button, it erases the input and directs the focus to another input area. However, it then automatically loses focus after using the focus() method. $(document). ...

jqueryhtml

Display "Page Loading Error" when submitting a form with jQuery Mobile via JavaScript

While working on my jQM project, I encountered an issue with form submission. Instead of using the "action" URL to submit the form, I opted to use JavaScript to submit the form after validation by another JS addon. Once validated, the form is submitted usi ...

javascriptajaxformsjquery-mobile

Converting JSON data from ASP.NET MVC to a Canvas.js chart

Despite my efforts to find a solution by looking through similar posts, I am unable to resolve the issue. Within my asp.net MVC controller, I have a method called public object OfferChart() List<Det> obj = new List<Det>(); foreach ...

javascriptjsonasp.net-mvcobjectcanvas

Learn how to dynamically incorporate multiple Bootstrap collapse elements in PHP

I've encountered an issue with my code that contains both HTML and PHP. The problem arises when there are multiple elements in a collapse, as only the first element works properly. This is due to the fact that each element has the same id named "colla ...

javascriptphpcsstwitter-bootstrap

The auto-fill feature provided by Google on my form

On my website, I have a form that redirects textbox input to www.google.com/search?q=.... Is there a way to incorporate the autocomplete / autofill features provided by Google when searching on google.com? I've noticed that Firefox uses Google's ...

htmlformsautocompletegoogle-api

Tips for arranging 3 tables in the right place using CSS

I have 3 tables that I utilize. My goal is to: have one on the left side of the page place one in the center of the page position one on the right side All at the same height. The issue arises when the tables expand and using float causes them to ...

htmlcsshtml-table

Utilize a JavaScript function to transform a single Unicode character into another representation

Objective: When clicked, update the arrow to face downwards. I attempted using a different unicode character in my JavaScript code to achieve this change, but I kept receiving the basic string even after trying to escape it with "\"... Feeling a bit ...

javascriptjqueryunicode

Adjusting the transparency of the object's interior

I used the side property to give my object an interior, but it also reflects the exterior: let material = new THREE.MeshStandardMaterial({side: THREE.DoubleSide}); https://i.sstatic.net/oikad.png https://i.sstatic.net/Vb03K.png Is there a way to red ...

javascriptthree.jstexturestransparencymesh

ng-bind-html not refreshed following ng-click triggering

Recently, I started learning about the MEAN stack. I have implemented an ng-repeat in my HTML code that displays a list of titles. Each title has an ng-click function attached to it, which is supposed to show more details in an overlay popup. blogApp.co ...

javascripthtmlangularjs

Guide on resizing a background image to fit a div

Looking to enhance the appearance of my website by incorporating a cover image. Positioned at the top of the page is a div tag with dimensions set to 80% width and auto height. I aim to insert an image as the background of this div, stretching in width b ...

csshtml

Identifying Touch Interaction exclusively on WebGL Canvas within threejs

Currently, I am developing a threejs application that requires input from HTML buttons and utilizes Raycast Detection on touch within threeJS. The issue I am encountering is that when the user clicks an HTML button, the Raycast function is triggered as we ...

javascripthtmlmobilethree.jsreact-three-fiber

Is the position relative malfunctioning when using display table-cell?

I have designed a horizontal menu consisting of buttons that I want to resize in width so that together they occupy 100% of the menu container. I need them to function like TD elements inside a TABLE. Here is the code snippet I have developed: <div id ...

htmlcss

Add a close event to a list item in JQuery before

When I click on "+ List Item" or press enter in the input box, I want to add a new list item with a checkbox, input box, and a close button. The functionality should be similar to Google Keep's checked item event working in notes. Currently, the code ...

javascriptjquerybootstrap-4

Updating an Image Using JavaScript

Having trouble changing an image using JavaScript. Followed instructions to use document.getElementbyId("image").src = "image2.jpg", but it's not working. Script is placed at the bottom after the image tag in the HTML. HTML code: ...

javascripthtml

Exploring the differences between arrays and filter functions within MongoDB aggregation operations

Recently, I crafted a sophisticated pipeline for my database: let orders = await Order.aggregate( { $unwind: "$candidate", }, { $lookup: { from: "groups", localField: & ...

javascriptmongodbaggregation-framework