0

I'm using position:fixed to fix a navbar at the bottom of the page in one of my mobile web projects.

However, browser-support for position:fixed is sometimes non-existent (e.g. Opera Mini), and thus my navbar breaks down for a small, yet un-ignorable % of users of the said web app.

Is there a pure CSS way to achieve the same effect in some other way? E.g. flexbox and z-index (or something)? It'll be best if it relies on properties well-supported across all browsers.

To be exact: I'm not looking for a sticky footer that sticks to the bottom when the page content is sparse, and otherwise pushes down. I'm looking for a way to fix something to the page's bottom, and allow the content to scroll "underneath it".

There are several answers for a question like mine on SO and other places. But they mostly fall back to position:fixed (or JS). I want neither. So are there any other solutions available? Would love to see an illustrative example from industry experts. Thanks in advance.

Hassan Baig
  • 15,055
  • 27
  • 102
  • 205
  • Can you use `position: sticky`? Other than `fixed` or `sticky` only Javascript can save you (and that's a no-no performance-wise). – connexo Feb 15 '20 at 18:42
  • @connexo: sad! `position:sticky` isn't supported on the said browser either: https://caniuse.com/#feat=css-sticky – Hassan Baig Feb 15 '20 at 18:46
  • 1
    You should really not punish 99% of your users to support a browser that doesn't comply with the spec. Opera mini is the only browser that doesn't support `position: fixed`. However, if you insist, you can use `flex` to achieve [something similar](https://jsfiddle.net/kqc45h07/) – volt Feb 15 '20 at 18:52
  • @volt: In my case, it's more like ~7%. I see your method - I'll take it for a spin. From your experience, is there any down-side to this method, or is it a perfectly valid alternative to using `position:fixed`? – Hassan Baig Feb 15 '20 at 19:00
  • Off the top of my head, I'm not aware of any downsides to using something like if you can restructure your markup in the required way. All the properties used have cross-browser support, but it's a good idea to do some testing just in case. – volt Feb 15 '20 at 19:03
  • @volt: too bad, seems although opera mini supports `flex`, it doesn't support `flex-grow` and `flex-shrink`, which is something your solution relies on. So that's the end of the line I presume? – Hassan Baig Feb 15 '20 at 21:26
  • If the height of the other elements like the header and footer is known in advance, you can also do something like [this](https://jsfiddle.net/gy5ez784/) but `calc()` also doesn't seem to be supported on Opera mini so I'm not sure if there's a an answer with pure CSS unless you give the content a fixed height with `vh` units that factors in the height of the header / footer. – volt Feb 15 '20 at 22:45
  • @volt: you've given 3 good options. Too bad they didn't work in my case. But I strongly recommend you add them as an answer (alongwith codepens). I'll upvote the answer, and in case nothing better comes my way, will probably accept it as well. – Hassan Baig Feb 16 '20 at 06:57
  • This is the closest one can possibly get to it: https://stackoverflow.com/questions/27971795/set-bottom-navbar-menu-on-the-bottom-of-the-page-without-a-positionfixed-boots – Hassan Baig Feb 16 '20 at 11:01

1 Answers1

0

Ok, this is very basic, but you could try something like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        header, footer {
            background-color: blue;
            height: 80px;
        }

        section {
            height: calc(100% - 160px);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            overflow-y: auto;
        }
    </style>
</head>
<body>
    <header></header>
    <section></section>
    <footer></footer>
</body>
</html>
Yin
  • 437
  • 1
  • 6
  • 15