"Utilizing Flexbox for a full-height column with an auto overflow feature

I'm looking to create a layout with a fixed header and footer, where the content in between always takes up the full height. I decided to use a three-row flexbox layout.

However, I'm encountering an issue with the left content column not scrolling (overflow-y:auto) when the content gets too long. It seems that setting it to 100% height isn't working as expected. Is there a way to achieve this without having to calculate the real height using something like 100vh minus the combined heights of the header and footer?

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    div[class^="col"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
      border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
    }
    
    .content {
      flex: 1;
    }
    
    .inner-content {
      overflow-y: auto;
      background-color: red;
    }
  </style>

</head>

<body class="d-flex flex-column h-100">
  <header>
    <div class="container">
      <nav class="navbar sticky-top">
        <a class="navbar-brand" href="#">Fixed navbar</a>
      </nav>
    </div>
  </header>
  <main class="content">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col h-100 p-0">
          <div class="h-100 inner-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet...
          </div>
        </div>
        <div class="col">col</div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>

Answer №1

Make sure to set a minimum height for the content area - Check out this related question Why don't flex items shrink past content size?

<!doctype html>
<html lang="en" class="h-100">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap demo</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    div[class^="col"] {
      padding-top: .75rem;
      padding-bottom: .75rem;
      background-color: rgba(112.520718, 44.062154, 249.437846, 0.1);
      border: 1px solid rgba(112.520718, 44.062154, 249.437846, 0.25);
    }
    
    .content {
      flex: 1;
      min-height:0;
    }
    
    .inner-content {
      overflow-y: auto;
      background-color: red;
    }
  </style>

</head>

<body class="d-flex flex-column h-100">
  <header>
    <div class="container">
      <nav class="navbar sticky-top">
        <a class="navbar-brand" href="#">Fixed navbar</a>
      </nav>
    </div>
  </header>
  <main class="content">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col h-100 p-0">
          <div class="h-100 inner-content">
            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
            sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores
            et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
            voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
          </div>
        </div>
        <div class="col">col</div>
      </div>
    </div>
  </main>
  <footer class="footer mt-auto py-3 bg-light">
    <div class="container">
      <span class="text-muted">Place sticky footer content here.</span>
    </div>
  </footer>
  <script src="js/bootstrap.bundle.min.js"></script>
</body>

</html>

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

A solitary block positioned at the heart of a grid - jquery mobile

Using grid in jQuery Mobile, I have designed a page and now looking to place a block exactly centralized on it. In the first grid, there are 2 blocks equally positioned. In the next grid, only one block is present and I want it to be centered. JSFiddle L ...

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

Flexbox's bootstrap columns display issue on smaller screens with no wrapping

I am currently working on a section of my website where I have applied some CSS to 2 divs and an anchor tag in order to center the content vertically. However, I am facing an issue with the flex style properties when the window size is less than 768px. In ...

Ensure all columns have the same height as the shortest column

While many solutions exist on Stack Overflow for making columns equal height based on the largest content, I am specifically interested in making all columns equal height based on the smallest column. https://i.sstatic.net/Xlcyh.png In this scenario, my ...

Avoid repeated appending of data in JavaScript and HTML

I am working with an HTML table and I need to ensure that the values in the second column do not repeat within the grid. Below is the JavaScript code I have written for this purpose: var $addedProductCodes = []; function getProductData(value){ $t ...

Trouble with launching Semantic UI modal

I have implemented a button using Semantic UI and set up a click event to open a modal when clicked, but nothing is happening. When I click on the link, there is no response. I'm unsure what the issue might be. Below is the code for the button: < ...

Issues with clicking in JS eventListener

I'm in need of some assistance with a small header issue in my project. I've included all the necessary header files so that you can run it in a snippet and see what's going on. The problem lies within my JS file. When running the file, you ...

Issue with Bootstrap jQuery dynamic table edit/delete/view button functionality not functioning as expected

Could really use some assistance with this issue. I have a DataTable that includes a button in the last column which offers options like Edit/Delete/View. When clicked, it should delete the entire row. However, I'm struggling to access the current ele ...

HTML - HREF standard for efficiently linking to directories in web development

Have you ever noticed this seemingly irrelevant detail: <a href="./some-file.html">Some File</a> And this one too: <a href="some-file.html">Some File</a> Both of these codes lead to the same URL. But which one is more efficient, ...

Complete picture in a circular div with aspect ratio

I'm currently working on creating a profile page and I'd like to have an image inside a circular div. The challenge is that I want the image to maintain its aspect ratio, even though the dimensions are unknown and users can upload images of any s ...

Looking for an image that spans the entire height of the container

I need help with positioning an img inside a div container that has a background color. I want the image to overlay on top of the div, extending beyond its height without causing any scroll bars. Here is a fiddle related to this issue: http://jsfiddle.net ...

Adapting iFrame height to accommodate fluctuating content height in real time (details included)

I have an embedded iframe that contains a form with jQuery validation. When errors occur, the content height of the iframe increases dynamically. Below is the script I use to adjust the height of my iframe based on its content: function doIframe(){ o = d ...

Personalizing Bootstrap by utilizing the default Bootstrap variables

In my recent project, I delved into the world of customizing Bootstrap version 5.1.1. During this process, I came across the concept of `!default`, which requires defining customizations before importing Bootstrap variables. One challenge I faced was tryin ...

Stylish Wave Animation Effects in CSS for iPad Native Application

The ripple effect on the iPad Native app is malfunctioning. The effect is mistakenly applied to all buttons in the navigation instead of just the li elements. Please identify the error and provide a solution. (function (window, $) { $(function() ...

Utilizing Google Fonts offline without the need for an API

Instead of relying on Google Fonts API to access a variety of fonts for my website, I took matters into my own hands. I downloaded a snapshot of fonts from this GitHub repository: https://github.com/google/fonts and transferred them to my web directory. T ...

The AngularJS page on my website is currently stuck in the mobile version, and strangely, the Google Chrome console is

When browsing our AngularJS website in mobile view on Google Chrome, it gets stuck and becomes unresponsive. The developer console does not show any error messages during this time. To replicate the issue, switch to mobile view, click on the "All top compa ...

How to ensure uniform button sizes in an HTML form by setting them all equal to the size

The code snippet provided below demonstrates a basic form with two submit buttons. <form> <input type="submit" value="< Previous"> <input type="submit" value="Next >"> </form> Depending on the value attribute, the bu ...

Searching for and replacing text that spans across multiple nodes in HTML can be accomplished using C# programming language

Here is the HTML code to consider. The term 'response' was modified to 'reason', by removing 'sp' (<del> tag) and adding 'as' (<ins> tag), while also removing 'se' (<del> tag). <div &g ...

Utilizing form selectors in non-traditional elements

Trying to optimize my website by avoiding nested forms, I have multiple forms loaded via AJAX. Instead of nesting them, I plan to use select and checkbox selectors along with jQuery actions outside the form element. Here's what I have in mind: <di ...

The document remains undefined and cannot be opened directly

I'm encountering an 'document' is undefined error out of the blue! I'm unable to directly open the file. Here is the code snippet: var main = function() { $('.icon-menu').click(function() { $('.menu').animate ...