Footer mysteriously collapses despite being set to a fixed size + odd performance

I've been working on a web page that features a fixed Navigation bar and Footer for logging information. Both the content and the footer are designed to scroll if needed. Thanks to some experimentation and the valuable input from those who responded to my previous question, I have managed to develop the code showcased at the end of this post, utilizing Bootstrap 4 and jQuery.

However, an issue has arisen where the footer diminishes in size when I manually resize the text area. Ideally, I would like to have a scrollbar appear exclusively on the main content, while the footer should remain unchanged.

Additionally, upon adding some extra lines to the main content, I observed that the content overflows beyond the designated area (the text extends beyond the beige section). Yet, when I adjust the text area's size, the content realigns within the beige background.

Can anyone pinpoint what error I might be making?

Link to the updated Fiddle: Fiddle

For reference, you can view my initial query here: here


<!-- Paste your HTML code here -->
cssbootstrap-4

Answer №1

When resizing a flex element, the others will also resize accordingly. To prevent the footer from resizing, add the classes "flex-shrink-0" and "flex-grow-0", and set the flex-basis of the footer to 100px.

<footer class="container-fluid overflow-auto flex-shrink-0 flex-grow-0">

footer {
  background: lightgreen;
  height: 100px; 
  flex-basis: 100px;
}

To change the overflowing part to beige, you can replace

<div class="col-10 d-flex flex-column" style="background-color: bisque;">

and

<div class="row flex-grow-1" style="background-color: beige;">

with

<div class="col-10 d-flex flex-column" style="background-color: bisque; position: absolute;">

and

<div class="row flex-grow-1" style="background-color: beige; position: relative;">

Answer №2

footer {
  background: lightgreen;
  min-height: 4rem;
  max-height: 4rem;
}

This code should function without any issues!

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

What is the purpose of the tabindex in the MUI Modal component?

Struggling with integrating a modal into my project - it's refusing to close and taking up the entire screen height. On inspection, I found this troublesome code: [tabindex]: outline: none; height: 100% How can I remove height: 100% from the ...

cssreactjstypescriptmaterial-uifrontend

Personalized hover effect using CSS on Caldera Forms

Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...

csswordpress

Vertically center text in an email within a div using HTML

i'm struggling to perfectly center the text within a div in an HTML email. While it appears fine in Browserview with proper line-height, issues arise in Apple Mail and Outlook where it doesn't align vertically. <div style='width: 80%; ...

htmlcssoutlookhtml-emailtext-align

Personalized cursor image using jQuery.css()

I have designed a .png image that I want to use as a custom cursor for a particular element with the class "next". Here is the code I am using, but it doesn't seem to be working. Is there anything important that I may have overlooked? $('.next& ...

jquerycss

HTML makes column text wrapping automatic

Is it feasible to implement text wrapping into two columns or more in HTML using solely CSS? I have a series of continuous text enclosed within p tags only, structured as follows: <div id="needtowrap"> <p>Lorem ipsum dolor sit amet, ...&l ...

htmlcsstext

Is there a workaround for lack of border radius support in IE8 when css3PIE is not functioning

I've come across numerous versions of this question, but none have been successful for me. I'm attempting to achieve rounded corners in IE8 similar to what I see in Firefox and Chrome. Below is my CSS code after integrating css3PIE: border-top- ...

htmlinternet-explorer-8csscss3pie

IE11 is unable to display the background image

I am attempting to create a process roadmap by using background images on list items. The background-image on the list item is not showing up in IE11 (also in all versions of IE10, 9, etc). CSS CODE body{padding: 50px 0;} .status-line { width: 80%; ...

htmlcssinternet-explorer

Attain three images with precise dimensions using CSS

Having trouble fitting 3 images in the same row? The issue arises when the images have different sizes, causing everything to shift. Any advice on how to address this problem? Thank you. HTML: <div class="first-slot"> <di ...

cssbootstrap-4

IntelliJ automation in Java does not allow clicking the button

Currently, I am on the PayPal page and I need to automate clicking the agree button. <form id="ryiForm" class="proceed ng-pristine ng-valid" ng-class="{true: 'validated'}[validated]" ng-submit="confirm.$valid && onPay()" novalidate= ...

javacssintellij-ideaselenium-webdriver

Improper Alignment of Bootstrap 4 Navbar Link: Troubleshooting Required

Take a look at the image for the issue: https://i.stack.imgur.com/u9aCy.png As shown in the image, the NavBar links are stacked instead of being displayed in one row. This is the HTML code I have used: <!doctype html> <html> <head> ...

javascriptcssangularbootstrap-4

Measure with an "em" unit indicated by a dot

Could you clarify if there is a distinction between writing padding:.6em and padding:0.6em; and if they have the same value, why not just use padding:0.6em; ? Thank you ...

css

Smooth-scrolling feature with touch interaction available in the scrollbar extension

Anyone here aware of a high-quality jQuery or CSS plugin for scrollbars that supports touch functionality and smooth easing? I've been on the lookout for one, but haven't had any luck so far. Even if it comes with a price tag, I'm interested ...

javascriptjquerycss

What steps can I take to ensure that an image does not exceed the size of its parent tag?

Is there a way to ensure that items placed in a container do not exceed the boundaries of the container? I am trying to use my logo as the home button, but when I set the image height and width to 100%, it becomes larger than the nav bar. The CSS for the n ...

javascripthtmlcssreactjsnext.js

Utilizing Bootstrap 4 to create fixed and fluid width side-by-side divs with scrollbars

I want to create a basic dashboard page. I decided to arrange two divs next to each other to serve as the side menu and content. Here is what the layout looks like: https://i.sstatic.net/EATK6.png I encountered an issue where the vertical scrollbar is n ...

csshtmltwitter-bootstrapbootstrap-4dashboard

Mastering the art of utilizing Angular Routing alongside CSS grid for seamless website navigation

My <app-root> layout is pretty straightforward: app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.compone ...

htmlcssangularcss-grid

difficulties with struts2 user interface elements

Can anyone explain why the s:textfield is being positioned at the bottom when inserted among other HTML elements within a form? And what steps can be taken to resolve this issue? <label><span class="required">*</span>First name</label ...

htmlcssstruts2

An error is thrown when using less.js

Every time I attempt to add less.js, I encounter an XmlHttpRequest Exception 101. Including the .less file is done using this method: <link rel="stylesheet/less" type="text/css" href="anything.less" /> This issue only arises when I upload the th ...

javascriptjquerycsslesstumblr

The o-gradient feature is not compatible with Mac and Linux operating systems

Hello there! I am facing an issue with creating a gradient on my website without using an image. Surprisingly, the gradient appears on Windows but not on Mac or Linux operating systems. Any idea why this might be happening? You can check out the website he ...

htmlcss

Compact looped slideshow

Currently in the process of designing a website and looking to incorporate a unique photo gallery feature. The concept is as follows: The photo gallery will be displayed in a rectangular/box shape. There are a total of 10 photos, with only 7 initially vis ...

javascriptcss

Having trouble with the rendering of the Stripe Element Quickstart example

Currently, I am diving into the world of Stripe's Element Quickstart. Take a look at this fiddle that I have been working on. It seems to be quite different from the example provided. Although I have included the file, I can't seem to figure out ...

javascripthtmlcssstripe-payments