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;
}