On Safari Mobile 10.3 sticky footer can be scrolled off the screen

前端未结

关注

 3  2122

Our mobile web application has sticky bottom navigation like the one you often find in iOS applications, and after Safari 10.3 release on landscape only it is p

相关标签:

3条回答

爱一瞬间的悲伤

2021-02-11 17:35
There is another way of creating a fixed element at the bottom of the page:

Set the <body> element (or whatever wraps your header, content and footer) to display: flex; height: 100vh. Then you take the footer and set it to margin-top: auto.

HTML:
```
<body>
    <header>
    </header>
    <main>
    <main>
    <footer>
    </footer>
</body>
```
CSS:
```
html {
    height: 100%;
}

body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

main {
    flex: 1;
}
```
A different solution with the same markup would be to use CSS Grid:
```
html {
    height: 100%;
}

body {
    height: 100%;
    display: grid;
    grid-template-rows: auto 1fr auto;
}
```
In order to get the best of both worlds you can wrap the CSS Grid styles in an @supports(display: grid){} wrapper. If Grid is supported the browser will take that and otherwise will fallback to Flexbox.

The best thing using this technique is that you won't run into overlapping contents, into zooming-issues and it is fully responsive from the get-go.

There is an article on CSS Tricks about the subject: https://css-tricks.com/couple-takes-sticky-footer/
0 讨论(0)
发布评论:

提交评论
- 加载中...

野趣味

2021-02-11 17:40

This is more a workaround than a real solution. However position: fixed has been a problem for mobile devices for years and the best way to overcome this problem is to use position: sticky.

sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport.

_{From: Stick your landings! position: sticky lands in WebKit}

However position: sticky is not fully supported yet, so I would suggest to use also:

position: sticky; /* currently in development for MS Edge */
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;

_{See status here for MS Edge sticky support status (thank you Frits)}

html,
body {
  height: 200%;
}

body {
  background-image: linear-gradient(180deg, #ededed 0px, #ededed 9px, #000000 9px, #000000 10px);
  background-size: 100% 10px;
}

footer {
  position: sticky; /* currently in development for MS Edge */
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -o-sticky;
  height: 50px;
  top: 80%;
  background: rgba(255, 0, 0, 0.7);
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <footer>
  </footer>
</body>

</html>

0 讨论(0)

说谎

2021-02-11 17:52

There is nothing you can do about it. Safari's landscape mode makes the container with your content going off the screen. This is not detectable and therefore not to solve. I tried to illustrate what happens:

The blue bar = Safari's navigation bar

The yellow bar = Your app's navigation bar

Instead of shrinking the container's height, Safari lets it go off the screen.

0 讨论(0)
发布评论:

提交评论
- 加载中...