Can a three-row CSS Flex layout that fills a whole page be achieved on mobile Safari?

Check out this code example: https://jsfiddle.net/Lsfvotd2/2/

I've encountered a persistent issue with the floating tool bar that seems to be blocking my footer completely. The toolbar should disappear when scrolling, but what if the page doesn't scroll at all? It remains fixed in place. Despite searching extensively on Stack Overflow, I haven't found a solution that effectively addresses this problem. Are there any recent insights or updates available as of 2023, or is this simply an unsolvable dilemma, especially considering compatibility issues with Safari?

I'm hesitant to resort to adding padding as a quick fix because it compromises the design layout on other browsers.

<header>header</header>
<article>Lorem ipsum dolor sit amet, consectetur adipiscing elit... (content continues) </article>
<footer>footer</footer>

html, body {
  margin:0;
  height:100%;
  min-height:100%;
}
body {
  margin:0;
    display: flex;
  flex-direction: column;
}
header {
  order: 1;
    flex-shrink: 0;
    flex-basis: 50px;
    background:red;
    z-index: 10;
}
article {
  order: 2;
  overflow-y: scroll;
    background:green;
}
footer {
  order: 3;
    flex-shrink: 0;
    flex-basis: 50px;
    background:blue;
    z-index: 1000;
}

Answer №1

The issue couldn't be replicated. I inserted the provided code on this page and conducted tests on mobile safari. The footer was visible with the toolbar showing, as well as hidden (to hide the toolbar without scrolling, simply click on the AA button located on the left side of the toolbar, then choose Hide Toolbar).

https://i.sstatic.net/sjKtt.jpg

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

Issue with HTML CSS: There is a gap between the words "Get" and "started", causing "get" to appear on

Greetings, it appears I am encountering an issue with my website. When I refer to "Get Started," it displays as "GetStarted." However, when I insert a space between "Get" and "started," it separates onto two lines as "Get" on the first line and "started" o ...

PHP: The issue with displaying array values in an HTML select within a form using a foreach loop

I am currently working with an array containing a list of countries. $country_list = array( "Afghanistan", "Albania", "Algeria", "Andorra", "Angola" }; I want to display these countries using a select element in my form <select ...

Unusual Glitch in Bootstrap 3 Dropdown Menu

I am currently developing a website using Bootstrap 3. I am encountering an issue with the navbar dropdown. When I click on the link, it changes to show "expand child menu" and "collapse child menu". To clarify, here is the image I am referring to: Initi ...

Tips for transferring control from the first button to a JavaScript function when clicking the second button

As a newcomer to javascript and html, I have a simple query. In my javascript file, there is a snippet of code that looks like this: function setColor(btn, color) { if (btn.style.backgroundColor == "#f47121") { btn.style.backgroundColor = color; } els ...

A guide on cloning a div when clicked using jQuery

I'm looking to clone a div element after it when a button is clicked. I've come across solutions in vanilla JavaScript, but I really need a solution using jQuery as I struggle with it. Can anyone lend a hand? This is my current setup: <div c ...

Troubles with Bootstrap's column functionality causing issues

Trying to create a menu using Bootstrap, but experiencing issues with the 'col' class not working correctly. Here is the sample HTML code provided: <div class="logo col"> <a href="index.html"><img src="C ...

The height of the Bootstrap column does not extend to its full potential

Having an issue: https://i.sstatic.net/L45Ii.png In the image, you can see that the column is not taking up the full height. The left side shows what I currently have, and the right side shows what I want to achieve. Here's the source code that corr ...

Despite importing jQuery, the variable '$' cannot be located

Whenever I try to click the button labeled test, it doesn't do anything. However, an error message appears in the console debug indicating: Error: Unable to locate variable '$'. I suspect this might be a jQuery issue, even though I' ...

The issue with jspdf is that it is failing to generate PDF documents of

I'm currently developing a resume builder app using ReactJS. One of the functionalities I'm working on is enabling users to download their resumes as PDFs. However, I've encountered an issue with the generated PDFs when using jsPDF. The down ...

Modifying HTML attributes using AngularJS

Is there a straightforward method to dynamically alter an HTML attribute? I've used Angular's scope variable and ng-hide to hide a div, but the size of the div remains unchanged. How can I adjust the size of that particular div? I attempted th ...

How can I translate these JQuery functions into vanilla JavaScript?

I am currently in the process of building a configurator using transparent images. The image configurator functions through a basic JQuery function: I have assigned each input element a data attribute called data-Image. This function identifies the data-Im ...

Issues with image display on Firefox

I'm facing a major issue with my website (check it out here), where some users are unable to view images using Firefox. Interestingly, I personally use Firefox and have not encountered this problem. The affected users are on Firefox 3.5.2 running Win ...

Infinite Loop in JavaScript

Is there a way to create an infinite loop in the JavaScript code below? Currently, there is a timer set to run every 50 seconds, but I need it to continuously repeat every 50 seconds. My knowledge of JS is very limited, and while some parts of the code w ...

The onchange() function for a multi-checkbox dropdown is failing to work as

Issue with Multiple Drop Down Checkbox Functionality: The first parameter is always received as undefined, and the onchange event only captures the value of the first checkbox selected. <select name="multicheckbox[]" multiple="multiple" class="4colacti ...

What is the best way to retrieve all the listed TV and film ratings in descending order? Using Django

Our Goal I aim to organize movies based on their star ratings and filter out those with ratings lower than a specified threshold. 2. Retrieve the IDs of Movies and TV shows mentioned in the view, fetch the data and score through URLs one by one. 3. Presen ...

A JavaScript alert function that triggers no matter the return value

An alert is being sent by a function when a radio box's value returns as null, even though it should have a value that is not null. The issue lies in another function on the page that hides the tables where these radios are located, making it difficul ...

The styling of Material UI's contained button is being overridden by MuiButtonBase-root

Currently, I am working with material-ui in a react project. In one of my components, I have incorporated a simple contained button: <Button variant='contained' color='primary'> Edit</Button> However, despite setting it as ...

Transferring information among forms with PHP and jQuery: Selecting sequential dropdowns

One of my challenges involves managing 2 input forms - Subject and Unit. It's important to note that Units are categorized within specific Subjects. For example: Subject - English, Math Unit - Nouns, Tenses, Algebra, Geometry In the database, the u ...

What is the best way to create a collage of images with a random and unique arrangement?

Recently, I stumbled upon a website and was intrigued by the unique effect of images randomly appearing on the screen. I'm curious about how this effect can be achieved. Is it possible to use CSS Grid to divide the screen and designate some grid ite ...

Is it possible to have evenly spaced divisions within a fixed wrapper?

I have been experimenting with creating a dynamic navbar that remains at the top of a webpage. Here's what I have so far: <style> .sticky-nav-wrapper > div { color: #000000; display: inline-block; display: -moz-inline-box; * ...