sticky footer with flexbox on ios

Question

I'm trying to create a sticky footer using flexbox, and the following works everywhere except the iPhone - it works on desktop Edge/FF/Chrome and Chrome on Android; it does not work on any iPhone browser (they all use the same rendering engine so not surprising). It displays a 1000px tall orange box containing the word "MAIN", followed by a red area containing "after main", followed by a blue area containing "FOOTER".

On the iPhone the red area is missing and the entire blue footer is shown on screen. It looks like the first and last element of the flex-column is attached to the top/bottom of the screen (instead of the top/bottom of the column).

Is there any way to get this to work on the iPhone too?

I'm testing on an iPhone 6 Plus with the latest iOS updates installed.

<!doctype html>
<html lang="nb-NO">
<head>
    <style>
        html, body { height: 100%; margin:0; padding:0; box-sizing: border-box; font-size: 1cm; }
        .body-content { background-color: red; }
        main { background-color: orange; }
        footer { background-color: blue; }

        /* combined height greater than window height */
        main { height: 1000px; }
        footer { min-height: 600px; }

        body {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>
<body>
    <div class="body-content">
        <main>MAIN</main>
        <p>after main</p>
    </div>
    <footer>FOOTER</footer>
</body>
</html>

Here is a PEN (http://codepen.io/thebjorn/pen/qZRBdL) demonstrating what I want to accomplish on the entire page. Comment in the main with height 200px to see behavior when content is taller than the container.

score 3 · Accepted Answer · edited May 23 '17 at 12:01

3

Z.Neeson's comment on Flexbox and vertical scroll in a full-height app using NEWER flexbox api seems to apply here, since the addition of this rule fixes it:

    .body-content, footer {
        flex-shrink: 0;
    }

edited May 23 '17 at 12:01

Community

1
1

answered Mar 16 '16 at 14:10

thebjorn

26,297
11
96
138

score 1 · Answer 2 · answered Mar 16 '16 at 13:26

1

You're setting a height on your html, body elements. Taking the height off the html/body fixes it in Safari responsive design mode (Can't check on device at moment, but this should carry across). e.g.

html, body {margin:0; padding:0; box-sizing: border-box; font-size: 1cm; }

Read this article about the difference between viewport and windows and it should help your understanding

http://www.quirksmode.org/mobile/viewports.html

answered Mar 16 '16 at 13:26

elmarko

813
7
17

If I omit the height on html,body the footer is no longer on the bottom of the screen when the combined height of main/footer is less than the height of the screen (e.g. setting main to `height: 400px;`) – thebjorn Mar 16 '16 at 13:30
I'm not 100% on what you mean? Do you mean that you want
to always be the height of the screen and the footer to always be beneath "the fold" of the screen? If so, setting main to something like main{height: 100vh;} should help
– elmarko Mar 16 '16 at 13:35
No, I want the footer to always be at the bottom of the column, and if the column is shorter than the window then `justify-content: space-between;` should kick-in such that `.body-content` is flush with the top of the screen, `footer` is flush with the bottom of the screen, and there is white-space between them. – thebjorn Mar 16 '16 at 13:38
I still think it's the use of the body element that's screwing this up for you. Trying this in your Pen, removing the height from the body class and everything works well. Why not add .body div from the pen as a wrapper around the content and have that as the first child of the body. Space-between will only show space when there is space between the elements. – elmarko Mar 16 '16 at 13:55
the body class in the pen represents the window, which is why it has an exact height and and overflow declaration. space-between should add the remaining space in the container, equally, between all items laid out in the container. – thebjorn Mar 16 '16 at 13:57
Yes, but it will only space-between if it knows there is additional white space in the container to spread the elements out. If there is no additional space in the div or you are overflowing out of the container it won't show white space. – elmarko Mar 16 '16 at 14:00
Correct, but it seems it will insert negative space when the content takes up more space than the container, causing the content items to overlap... No other browser does this. – thebjorn Mar 16 '16 at 14:02

sticky footer with flexbox on ios

2 Answers2