Ensuring that the bootstrap5 column extends all the way to the footer

Question

Ensuring that the bootstrap5 column extends all the way to the footer

Looking to display a specific email address mailbox for a project. The goal is to have the 'Mail Card List' scrollable instead of extending beyond the page. Tried using 'max-height:;' CSS, but it sets a fixed height. Seeking a variable height for adaptability to different screen sizes. Any tips on how to achieve this would be appreciated. Thank you.

https://i.sstatic.net/78hNU.png

Any advice on how to achieve this (or even where to look) would be great. Thank you.

JsFiddle: https://jsfiddle.net/6fr9bh4v/4/

html css bootstrap-5

Answer 1

Answer №1

Replace the inline style rule for overflow by utilizing the overflow-scroll class from Bootstrap.
For the overflow to function properly, assign a dynamic height relative to the viewport using relative to viewport
```

<div class="col-3 overflow-scroll vh-100">
.
.
.
</div>
```

After implementing the above changes, you should observe improvements. However, remember to account for the height of other elements such as navigation. To adjust for this, use CSS calc() to subtract it from the full viewport height. Create a custom class for the height relative to the viewport, for instance:

.custom-height {
  height: calc(100vh - 400px);
  min-height: 60px; /* add min-height to prevent it from becoming way too small if not enough vertical space*/
}

To accommodate space for the footer, add margin to the "mailbox page" container div using mb-5
Remove fixed-bottom from <footer>

Complete code:

.custom-height {
  height: calc(100vh - 400px);
  min-height: 60px;
}

<!doctype html>
<html lang="en>
...

Answer 2

Replace the inline style rule for overflow by utilizing the overflow-scroll class from Bootstrap.
For the overflow to function properly, assign a dynamic height relative to the viewport using relative to viewport
```

<div class="col-3 overflow-scroll vh-100">
.
.
.
</div>
```

After implementing the above changes, you should observe improvements. However, remember to account for the height of other elements such as navigation. To adjust for this, use CSS calc() to subtract it from the full viewport height. Create a custom class for the height relative to the viewport, for instance:

.custom-height {
  height: calc(100vh - 400px);
  min-height: 60px; /* add min-height to prevent it from becoming way too small if not enough vertical space*/
}

To accommodate space for the footer, add margin to the "mailbox page" container div using mb-5
Remove fixed-bottom from <footer>

Complete code:

.custom-height {
  height: calc(100vh - 400px);
  min-height: 60px;
}

<!doctype html>
<html lang="en>
...

Ensuring that the bootstrap5 column extends all the way to the footer

Answer №1

Similar questions

Unable to modify the bar's color using the .css document

I developed a website and also created a mobile.html version, with the desire to seamlessly switch between the two based on screen

Swap the content of one div with another div using client-side code only

Creating a login form using HTML, PHP, and MySQL: A step-by-step guide

Upon clicking the link, my hover function was disabled

Access the JavaScript variable in a webview and store it in an Android variable

Styling the active selection in nav class with bold attribute in Bootstrap/AngularJs

Modifying canvas border colors using AngularJS

Difficulty in arranging DIVs on a flat surface

Custom HTML select element not triggering the onchange event

Getting in formation without needing a table

Using Jquery to select a specific id for an input element that is a checkbox

What are the steps for creating an animated visualization of the peak chart?

Determining the file extension type of an uploaded file using JavaScript

Functionality Issue: Submit Button Not Working on Designed Form Select

Flipping a combination of CSS 3 and JavaScript cards will cause them to flip all together in unison

Having trouble getting the CSS footer from cssstickyfooter.com to function properly

A guide on incorporating a customized Google map into your website

Unable to expand Bootstrap navbar due to collapsing issue

Is there a quick way to retrieve the IDs of all the checked boxes on a displayed database in QUICKFIX?