CODEWITHSUNDEEP
ioscssiphoneflexbox
thebjorn
thebjorn

Reputation: 27360

sticky footer with flexbox on ios

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.

Upvotes: 2

Views: 2468

Answers (2)

thebjorn
thebjorn

Reputation: 27360

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

Upvotes: 3

elmarko
elmarko

Reputation: 923

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

Upvotes: 1

Related Questions