Header and footer that remain in place while the content scrolls smoothly

I'm currently working on designing a webpage that includes three separate divs: a header, a footer, and a content area. These divs are intended to fill up the entire screen space available.

The header and footer remain consistent in size and structure, while the content area is flexible and can vary in length. To address this, I have applied the CSS property overflow:auto to allow for scrolling when the content surpasses a certain length.

However, the issue arises when the content area extends beyond the screen height. I have created a demonstration using a fiddle: https://jsfiddle.net/tdxn1e7p/

To ensure the height of the html and body elements are set to 100%, I utilize the following CSS code, enabling the use of height:100% on the container element:

html, 
body {
    height: 100%;
}

The layout of my document follows this structure:

<div style="height:100%;">
  <div>
    Header content
  </div>
  <div style="overflow:auto;">
    Body content... which may vary in length
  </div>
  <div>
    Footer content
  </div>
</div>

While I've come across various solutions to similar issues, such as this question, I have yet to find a resolution that works effectively for my specific case.

htmlcss

Answer №1

Method 1 - using flexbox

This method is effective for elements with both known and unknown heights. Ensure that the outer div is set to height: 100%; and reset the default margin on the body. Check out the browser support tables.

View jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header, .footer {
  background: silver;
}
.content {
  flex: 1;
  overflow: auto;
  background: pink;
}
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Method 2 - Using CSS table

This method works well for elements with both known and unknown heights. It is also compatible with legacy browsers, including IE8.

View jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
  width: 100%;
  display: table;
}
.header, .content, .footer {
  display: table-row;
}
.header, .footer {
  background: silver;
}
.inner {
  display: table-cell;
}
.content .inner {
  height: 100%;
  position: relative;
  background: pink;
}
.scrollable {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  overflow: auto;
}
<div class="wrapper">
  <div class="header">
    <div class="inner">Header</div>
  </div>
  <div class="content">
    <div class="inner">
      <div class="scrollable">
        <div style="height:1000px;">Content</div>
      </div>
    </div>
  </div>
  <div class="footer">
    <div class="inner">Footer</div>
  </div>
</div>

Method 3 - Using calc()

If the header and footer have fixed heights, you can utilize CSS calc().

View jsFiddle

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 50px;
  background: silver;
}
.content {
  height: calc(100% - 100px);
  overflow: auto;
  background: pink;
}
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

Method 4 - Percentage for all

If the header and footer heights are known and in percentage, you can simply calculate the total height of 100%.

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  height: 100%;
}
.header, .footer {
  height: 10%;
  background: silver;
}
.content {
  height: 80%;
  overflow: auto;
  background: pink;
}
<div class="wrapper">
  <div class="header">Header</div>
  <div class="content">
    <div style="height:1000px;">Content</div>
  </div>
  <div class="footer">Footer</div>
</div>

View jsFiddle

Answer №2

If you're working with Bootstrap 4.0 and want a setup with a stationary header and footer but scrollable content, simply encase all your elements within a .container-fluid class as you probably already are. Add the classes .fixed-top and .fixed-bottom to your header and footer divs to lock them in place. Just make sure there's plenty of content to scroll through to see it in action.

Answer №3

The method suggested by @Sticker using flexbox worked seamlessly. If you're working with Bootstrap 4, there's a way to achieve the same result without the need for custom CSS:

<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="21434e4e55525553405161150f140f">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet"/>

<html class="h-100">
  <body class="h-100">
    <div class="wrapper d-flex flex-column h-100">
      <div class="header">Header</div>
      <div class="content flex-grow-1 overflow-auto">
        <div style="height:1000px;">Content</div>
      </div>
      <div class="footer">Footer</div>
    </div>
  </body>
</html>

Answer №4

overflow: auto is specifically for the content within the element. The current div has a dynamic height, preventing any content from overflowing it.

To enable scrolling within the content div without overflowing the page, you can set a maximum height for it using:

<div style="max-height: 80%;">

This will limit the div's height to 80% of the page but no more. Additionally, consider setting the body to overflow: hidden to handle any margins: See updated example.

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

Immersive pop-up interface displaying a variety of embedded videos simultaneously

I am a beginner in JavaScript and I came across a CodePen that does exactly what I need, but it currently only works for one embedded video. What I aim to achieve is similar functionality, but with 6 videos. (function ($) { 'use strict'; ...

javascripthtmlcsspopupcodepen

Flexbox Alignment Problem with Mixed Text and Image Elements

Struggling to achieve a layout like the one in this image using Flexbox. Take a look: https://i.sstatic.net/EGsAN.png After some difficulty with floats, I've decided to experiment with flexbox. My CSS is set up to display the image correctly. The ...

htmlcss

Guide to displaying a template using Vue.js

Incorporating jQuery and vuejs version 2.3.4: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js The code snippet below demonstrates my current setup: // Instantiating Vue. vueVar = new Vue({ el: '#content', ...

jqueryhtmlvue.js

Hover image displacement

Can anyone help me identify the feature used in this price list where the mouseover changes and a big image appears underneath? I'm trying to achieve something similar but can't figure out how. Any guidance would be appreciated. ...

htmlcss

What is the best way to get rid of a connect-flash notification?

I'm having trouble removing the message (with the username displayed) after logging out by pressing the logout button. Every time I try to press the logout button, it just refreshes the page without any action. I want to stay on the same page and not ...

javascripthtmlexpresslogout

The video is not displaying on my website

I recently added a video to my webpage that is 3:48 minutes long. However, even though I have the navigation bar and sound in place, the video does not seem to be displaying properly. Here is an image of how it appears: https://i.stack.imgur.com/HeN41.png ...

htmlcssvideo

Ways to implement CSS styling to every input element excluding inputs located within list items of a specific class

input.not(li.tagit-new >input) { background-color: lightgrey; } <ul id="tagAdministrator" style="width: 505px" class="tagit ui-widget ui-widget-content ui-corner-all"> <li class="tagit-new" style="box-shadow: none;"> <input ty ...

htmlcss

What is the best way to define ngOptionValue for my ng-option selection?

After updating my select/option code to include a search feature, it caused an issue with my function create. Here is the HTML code: <div class="input-group"> <label htmlFor="categoria" class="sr-only"> ...

htmlangulartypescript

The ng-bind directive is functional when used with a textarea element, but it does not work with

Recently diving into the world of angularjs, I stumbled upon ng-bind and its interesting functionality when used as a directive for textarea: <input type="text" ng-model="review.start"/> <textarea ng-bind="review.start"> </textarea> I ...

javascripthtmlangularjs

What method can be used to incorporate Google Places API into a .js file without using a <script> element?

As I delve into the Google Places API documentation, I noticed that they require the API be loaded in this format: <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script> Is ...

javascripthtmlapigoogle-places-apiapi-key

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...

htmlangulartypescriptbootstrap-4angular6

How can I adjust the position of a circular progress bar using media queries?

My code involves creating a circular progress bar. However, I am facing an issue where the circles stack on top of each other when I resize the window, as shown in the output screenshot. I want to ensure that the position of the 3 circles remains fixed whe ...

htmlcssbootstrap-4

Tips for keeping Sub Menu visible at all times

Is there a way to keep the sub menu always visible on the homepage of my website's navigation? Thank you for your help! Check out my website here ...

htmlcsswordpress

Retrieve the index value within a given range

How do I retrieve the index number using PHP? foreach ($array as $index => $value) { // Use $index to access the index number } Is there a way to obtain the index number in Go language? {{ range .posts }} {{ index . }} {{ .Id }} {{ .Name}} ...

htmlloopstemplatesgogo-templates

Equalizing column heights in Bootstrap layouts

It seems like a straightforward issue, but I'm having trouble finding a solution. I am utilizing Bootstrap5 for this project. You can find the complete code here : Due to some problems with Codeply, I have also uploaded it on jsfiddle. https://jsf ...

htmlcssbootstrap-5

What is the best way to input keys without losing focus?

I am facing an issue with an HTML <input> field that displays autocomplete suggestions while the user is typing. I want to create an automated test using Selenium, where the driver inputs keys and then verifies the contents of the autocomplete dropdo ...

pythonhtmlseleniumselenium-webdriver

Tips for determining the full width of a webpage, not solely the width of the window

While we can easily determine the width of the window using $(window).width(); This only gives us the width of the window itself, not accounting for any overflowing content. When I refer to overflowing, I mean elements that extend beyond the visible view ...

javascriptjqueryhtmlcss

Tips for displaying an image larger than its container using CSS or Bootstrap

I'm attempting to include an image on the left side of text within a dark container. However, I want the picture to start at the very bottom of the container and extend above the top of the container, so that the image appears outside the top of the c ...

csstwitter-bootstrapbootstrap-5

The CSS styling for the <body> element is not rendering the expected results

website <!DOCTYPE html> <html> <head> <title>Time Tracker</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link ...

htmlcssbootstrap-5

Four-pointed star design with rounded edges

https://i.sstatic.net/E3ZFb.png My goal is to create a pixel-perfect star using CSS. I have attempted to achieve this so far, but the star currently has 5 points and I would like it to only have 4 points. Additionally, I am looking for a way to make the c ...

htmlcsssvgcss-shapes