Why Does My Flexbox Sticky Footer Not Work in Safari?

StackOverflow https://stackoverflow.com/questions/23642341

  •  22-07-2023
  •  | 
  •  

题

I've been trying to learn something about CSS flexboxes, specifically to get a sticky footer working, based off this example.

The layout is 3 basic divs: a header, main content and footer. The main content div is supposed to expand vertically such that the footer is always at the bottom of the page. In Safari, the page loads as expected, but resizing the window vertically does not adjust the height of the layout (i.e. nothing's moving) — if I make the window taller, the extra space in the main content div doesn't change to keep the footer at the bottom, likewise . Resizing the window horizontally does reflow the page properly. Everything does work as expected in Chrome.

The example page works as I would expect, and I've followed the example CSS closely (using Autoprefixer's live demo). Comparing the pages in web inspector, the flexbox CSS appears to be consistent, and the only (seemingly) relevant difference is the live code on the example uses min-height: 100% for the flexbox container, whereas mine (and the example code given) uses min-height: 100vh (using 100% didn't work at all for me).

So my question: what is the example site doing differently that mine isn't, and why? Secondarily, why does min-height work in percentages for one, but only viewport units for another?

My code (also on jsfiddle):

<!DOCTYPE html>
<html>
<head>
    <title>Flexbox Header Test</title>
    <style type="text/css">
        body {
            font-family: Avenir, sans-serif;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
            -webkit-flex-direction: column;
            -ms-flex-direction: column;
            flex-direction: column;
            padding: 0;
            margin: 0;
            min-height: 100vh;
        }

        div {
            width: 100%;
        }
        div p {
            margin-left: 1em;
            margin-right: 1em;
        }
        div.header {
            background-color: orange;
            text-align: center;
        }
        div.main {
            background-color: grey;
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
        }
        div.footer {
            color: white;
            background-color: blue;
        }
    </style>
</head>
<body>
<div class="header">
<h1>Header</h1>
</div>
<div class="main">
<p>Lots of text here</p>

</div>
<div class="footer">
<p>Footer text here</p>
</div>
</body>
</html>
有帮助吗？

解决方案

Thanks to some help from the developer of the site I took the example from, I discovered the cause of my problems: the html element didn't have any height set, thus the min-height on body didn't have any effect. Setting html { height: 100%; } resulted in the expected behaviour.

I admittedly still don't fully understand the why of what caused the initial layout and horizontal resizing to work, but vertical resizing not to, but this at least solves the problem. There was some suggestion from the developer that Safari has some bugginess related to using vh measurements, so that may be it. If anyone can shed some light on that issue, by all means go for it.

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top