issue with padding-bottom in Firefox and Internet Explorer 11

JsFiddle

CSS

body, html {
  background: violet
}
* {
  margin: 0;
  padding: 0
}
.fixed {
  height: 100%;
  width: 300px;
  background: #fff;
  right: 0;
  position: absolute;
  top: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  border-left: 1px solid red;
}
.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
  border-top: 1px solid #f0f0f0;
  box-sizing: border-box;
  padding-left: 35px;
  background: red
}

I have attempted the code above in Chrome and Firefox browsers. I've even included two screenshots to illustrate my question. Why is padding-bottom:60px not functioning as expected in Firefox? It works perfectly in Chrome but not in Firefox or IE11.

In Chrome Browser (Fully Functional) :

https://i.stack.imgur.com/hTOBN.png

In Firefox Browser (Padding Bottom Issue. Any ideas?) :

https://i.stack.imgur.com/t9Fl9.png

This inconsistency puzzles me..

htmlcssfirefoxflexboxcross-browser

Answer №1

Various experts have provided different reasons for issues like overflow property causing problems or display:flex handling padding in a unique way. @Temani Afif pointed out a recent bug related to overflow-y:scroll or overflow-y:auto not considering padding-bottom.

https://bugzilla.mozilla.org/show_bug.cgi?id=1417667

A quick solution is to apply bottom padding on the pseudo element of the item with the overflow-y property instead of directly on the flex item.

.container {
  -ms-flex: 1 1 auto;
  -webkit-flex: 1 1 auto;
  flex: 1 1 auto;
  overflow-y: auto;
  box-sizing: border-box;
  padding: 30px 60px 0 60px;
}

.container:after {
  content:'';
  display:block;
  padding-bottom:30px;
}

I hope this solution helps you and others facing similar issues.

Answer №2

This issue arises due to the overflow-y: auto; property in the CSS code. You can try the following adjustments:

.container {
    -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;  /* Removing this line will change the padding-bottom */
    box-sizing: border-box;
    padding: 30px 60px;
}
.footer {
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
    padding-left: 35px;
    background: red;
    margin-top: 60px; /* This line adds the desired effect */
}

EDIT

The padding-bottom theoretically exists, but it is obscured by the scroll bar when overflow-y:auto; is applied.

If you wish to avoid adding a margin-top: 60px;, consider using this updated CSS:

.container {
      -ms-flex: 1 1 auto;
    -webkit-flex: 1 1 auto;
    flex: 1 1 auto;
    overflow-y: auto;
    box-sizing: border-box;
}
.container p {
    padding: 30px 60px;
}
.footer {
    border-top: 1px solid #f0f0f0;
    box-sizing: border-box;
    padding-left: 35px;
    background: red;
}

UPDATE

You can also test this alternative solution:

.container {
    overflow-y: auto;
    padding: 30px 60px;
}
.container p {
    padding: 0 0 60px 0;
}

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

Tips on customizing image borders/masks with hover effects

Is there a React library or a simple CSS trick to create an image's canvas cropping effect on hover? For example, similar to this: Thanks in advance! ...

javascriptcssreactjs

MaxwidthLG in Material UI design

Hi there, I've encountered an issue with Material UI CSS. Even after attempting to override it, the desired effect is still not achieved. My goal is for the entire div to occupy the full page but this is the current result: https://i.stack.imgur.com/b ...

cssmaterial-uimaterial-design

Efficiently transferring time values from dynamically created list items to an input box using JavaScript

Is there a way to store a dynamically generated time value from an li element into an input box using JavaScript? I have a basic timer functionality on my website that includes starting, stopping, pausing, taking time snaps, and resetting them. These time ...

javascripthtml

I am unable to utilize folder paths in CSS within my React application

Having trouble setting a background image in CSS within my React app. When styling and setting the image from a React component, it works just fine. Can anyone provide assistance? This code snippet will work: const style={ width:'300px', ...

cssreactjsbackground-imagecss-loader

Incorporate different courses tailored to the specific job role

https://i.stack.imgur.com/iGwxB.jpg I am interested in dynamically applying different classes to elements based on their position within a list. To elaborate: I have a list containing six elements, and the third element in this list is assigned the class ...

javascriptjqueryhtmlcss

Discover the method for measuring the size of a dynamically generated list

I'm currently working on a chat box that displays messages as a list. One issue I'm facing is that when I click on the start chat button, the chat box opens but the length of the list always remains zero. How can I resolve this problem? $(docu ...

javascriptphpjqueryhtml

What is the best way to showcase a blank div element using CSS?

Is there a way to make this empty div tag display without having to add &nbsp;? Can it be achieved using only CSS? <div class="bar bg-success" title="2015-07-23,5.0000" height="50%"></div> .bar { background: green; width: 5px; float ...

htmlcss

Unable to display imported image in React application

I have a component where I want to display an image: import React from 'react' import background from '../media/content-background.jpg' function ContentPage(){ return( <div id="content-page"> < ...

htmlcssnode.jsreactjswebpack

jQuery UI Sortable: Efficiently Drag Items Across Multiple Interconnected Lists

One feature of using jQuery UI Sortable is the ability to make the sortable item container scroll when an item is dragged. This can be achieved by specifying the scroll option. In my case, I have several sortable lists that are connected within separate c ...

javascriptjqueryhtmlcssjquery-ui

Images on NextJS are failing to resize properly in Next 13

I have been facing challenges with optimizing image sizes for different screen resolutions using the NextJS Image component. Currently, all images seem to be loading at their largest size on various screens. Below is a screenshot showing the resolution t ...

htmlreactjsnext.jsnext.js13nextjs-image

Discovering specific keywords within HTML tags and performing replacements using jQuery

I am searching for specific strings within my HTML code, and if I find them, I want to replace them with nothing. For example: HTML: <img src=`javascript:alert("hello ,world!")`> My goal is to locate keywords like javascript, alert, etc, within H ...

javascriptjqueryhtml

Printing a modified div element that was created using jQuery on an ASP.NET MVC webpage after the initial page has finished loading

In my view, there is a div that holds multiple tables generated based on the model. Each row in these tables contains fields that can be edited using TextBoxFor. Through jQuery, rows can be moved between tables and new tables can be created dynamically wit ...

javascriptjqueryhtmlasp.net-mvc

How to Ensure an Element Appears Above Another Despite Z-Index Troubles?

After conducting approximately 2 hours of research on this topic, I was unable to find clear answers or solutions. Hence, I have decided to address the issue here. The problem I'm facing is as follows: Due to the nature of HTML/CSS, it seems impossi ...

javascriptjqueryhtmlcssz-index

Encountering difficulties connecting to the database within Vue data tables

My php script was working fine with vuetify data, but now every page is showing the error message: Your search for "{{ search }}" found no results. It seems like this issue occurs when the script cannot fetch data from the database. Here is my d ...

phphtmlsqlvue.jsvuetify.js

Experiencing difficulties with running the prefixer script in npm

I'm facing issues while trying to run prefix CSS despite having installed the necessary npm packages like prefixer and postcss-cli in my development environment. When attempting to run the prefixer for my CSS file, I encountered some errors. Here&apos ...

cssnode.jsnpmsassnode-sass

Exploring the integration of Selenium WebDriver with a Polymer website and its Shadow root functionality

When I use Google Chrome console, I can easily click on a Shadow root element using the following code: document.querySelector('html /deep/ next-tab').querySelector('a').click() However, when I tried to do the same thing with web-driv ...

javahtmlselenium

Having issues with the Vue.js documentation example not functioning properly in Codepen?

My goal is to replicate a checkbox example from Vue.js's documentation. However, when I import Vue into codepen.io and copy the code for multiple checkboxes into the JS field, then paste the HTML into the designated field, something isn't working ...

htmlvue.jscodepen

Prevent users from downloading images

I'm trying to prevent image downloads by regular users, like so: <div style="background-image: url(img.jpg); background-size: cover; background-repeat: none; "> <img src="wtrmrk.jpg" style=" opacity: 0; " /> </div> If the img.jpg s ...

htmlcss

When it comes to identifying a click outside of an element, the Jquery or Javascript function may encounter some challenges specifically with Internet Explorer

After reviewing various solutions online, I noticed that they all function properly on Chrome and Firefox but encounter issues with Internet Explorer when interacting with an SVG. For instance, consider the following code snippet: $(document).on("click",( ...

javascriptjqueryhtmlsvg

Access the value retrieved from a form on the previous page using PHP

I'm struggling with extracting values from radio buttons on a previous page. Currently, my HTML and PHP code works fine with the search bar, which is the first form below. However, I'd like to add radio button filters below the search bar. <s ...

javascriptphpjqueryhtml