Internet Explorer 11 features a fixed "footer" positioned at the bottom of the page. If the content above exceeds the height of the window, the footer will automatically be pushed down to accommodate

I have set up a "footer" to remain at the bottom of the page and adjust its position if the content above extends beyond the window height. While this functions correctly on Chrome, I have encountered an issue with IE11 where the footer does not adjust and allows the content to overflow over it:

You can view a demo of this issue here: https://jsfiddle.net/6zrk5adu/2/

The implementation involves an upper flex container:

.upper-flex-container {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
}

Followed by a lower flex container for the footer:

.build-version-flex-container {
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 75px;
  display: flex;
  justify-content: space-between;
}

Is there a way to resolve this issue in IE11 and can this flex layout be compatible with IE11 at all?

htmlcssflexboxcross-browserinternet-explorer-11

Answer №1

The solution to the problem was discovered by adjusting the css of the upper flex container in the following manner:

.upper-flex-container {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: auto;
}

Although not completely certain, it appears that the issue is specific to IE11.

https://jsfiddle.net/4xtjw35k/4/

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

Completing a third-party htaccess file

What's the best way to create a nodejs script that periodically monitors a 3rd-party website, but encounters issues with a username and password prompt generated by .htpasswd/.htacces authentication? How can nodejs handle this situation? ...

htmlnode.js.htaccessscrape.htpasswd

Invalid file name detected during the download process

Below is the Javascript code I currently use to download a pdf: var link = document.createElement('a'); link.innerHTML = 'Download PDF file'; link.download = "Report.pdf"; link.href = 'data:application/octet-stream;base64 ...

javascripthtmltypescriptpdfarraybuffer

Strategies for positioning a fixed div at the bottom of another div

I'm in the process of creating a digital restaurant menu... I decided to format it as a popup, situated within a fixed container on top of a gray transparent overlay. However, with a large number of dishes, the content exceeds the size of the containe ...

htmlcssscrollpopupcss-position

React does not support having two :focus selectors on a single JSX element

I'm working with a React script that includes a specific element. I want to apply more than one :focus-within selector in CSS, but for some reason only the dropdown selector is being expressed when I focus on the element. Here's the code: React J ...

htmlcssreactjsflexboxfocus

Is PHP loaded prior to the `html body`?

I'm facing a unique challenge where I am currently transferring variables from a PHP page to hidden HTML inputs. The values are extracted from these hidden inputs using a JavaScript function that is called in the following manner: <body onload=" ...

phpjavascripthtml

I am attempting to extract text from an element, but instead of the text, I received a value and am unable to click on it. This particular element is a dropdown button in a Selenium test, with

<div class="select-wrapper initialized"> <span class="caret">▼</span> <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-56a6924e-42d9-1f78-1b82-fe2c1cbdfbdd" value="R3PORTS ...

htmlselenium

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

htmlcssfont-family

What is the purpose of applying the two unique class names (root and disabled) to the DOM in order for it to function correctly?

When it comes to customizing components using material-ui, the process can be a bit tricky. Here's how you can do it: const styles = { root: { '&$disabled': { color: 'white', }, }, disabled: {}, // This is i ...

cssreactjsmaterial-uijsscss-specificity

Ways to implement a placeholder height for images on a webpage with varying heights using HTML

I'm facing an issue with an image on my website that has a dynamic width and height as defined by the following CSS: .sm_item_image { width:100%; height:auto; max-width:400px; } The problem arises when the image takes some time to load, ...

javascripthtmlcss

The challenge of using CSS Flexbox to position the logo with a margin-top

While learning flexbox, I encountered a challenge. I aim to center align h1, p, and button elements, with the logo positioned at the top margin-top of 1em. Essentially, I want the h1, p, and button to be centered, while the logo is positioned at the top wi ...

htmlcssflexbox

Adding a Material Icon to an input type of 'submit' can be done by including the necessary HTML code and

Can Material Icon classes be used with button inputs? For example, using the <button> tag allows us to do this: <button class="btn btn-secondary btn-block btn-flat" id="submit"><i class="zmdi zmdi-long-arrow-right"></i> Login< ...

htmlmaterial-ui

Create a boundary behind the title on a see-through backdrop

How can I create a design where there is a line to the left and right of a headline? Usually, I would use border-top on the surrounding element and style the headline with some CSS properties like this: h2 { margin-top: -10px; padding: 0 5px; b ...

cssbordertransparentmargin

Prioritize the first child in Flexbox by truncating its text before the second

I am working with a flex-box container named .search-bar, which contains two divs with text, labeled as .title. My goal is to make the second child take up any extra space available and only start ellipsizing when there is no more space left for the first ...

cssflexboxellipsis

Utilize the "display: flex" property to position an avatar alongside a comment that is wrapped

Looking for a solution similar to the problem presented in this Stack Overflow thread about positioning text next to an image, but specifically when using "display: flex". We are facing an issue where a comment, consisting of an avatar image and accompany ...

htmlcssflexbox

Trouble with integrating HTML5 canvas from an external JavaScript file

Having trouble with storing canvas js in an external file. If the javascript responsible for drawing on the canvas is included in the html header, then the rectangle is displayed correctly. Here is the working html (javascript in html header): <!DOCT ...

javascripthtmlhtml5-canvasexternal-js

Creating a dynamic and adaptive horizontal SVG line for your website

Understanding how SVGs function is still a bit unclear to me. I know that the viewBox property plays a role in scaling SVGs, and I have come across advice suggesting not to specify height and width attributes when creating responsive SVGs. While there are ...

htmlcsssvg

Unable to modify the .top attribute style in elements within an arraylist using JavaScript

I need to align multiple images in DIVs on the same line by setting their Top value to match the first image in the array. Here is the code I am struggling with: (addBorder function is called when divs are clicked) <div class="DRAGGABLE ui-widget-cont ...

javascriptjqueryhtmlcss

Binding event listeners to dynamically created elements poses a challenge

I am facing difficulty in adding an event listener to dynamically created elements. The issue lies in my code where I am unable to detect the insertion of <p> element resulting in the lack of console message Bar Inserted. Could you point out if there ...

jqueryhtml

I currently have two responsive menus and I'm trying to figure out how to modify the javascript so that when one menu is opened, the other

I am facing an issue with my responsive menus on a webpage, similar to the example provided in the jsfiddle link below. Currently, when one menu is open and I click on another, both remain open. How can I modify the JavaScript code so that when one menu op ...

javascriptjquerycssresponsive-design

Using HTML and CSS to create a line break between div elements

Currently, I am working on a page that allows users to post comments. However, I have encountered an issue with the div element that contains the posted message. When the message is too long and lacks line breaks, a horizontal scrollbar appears. I would li ...

asp.nethtmlcss