Created
January 25, 2022 12:24
-
-
Save klich3/d6a0a04793e6f563dd138fa5308aa69d to your computer and use it in GitHub Desktop.
Attach some dom element on the bottom of screen as absolute, triggered to move on resize address bar.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- | |
| Author: <Anthony Sychev> (hello at dm211 dot com | a.sychev at jfranc dot studio) | |
| Buy me a coffe: https://www.buymeacoffee.com/twooneone | |
| Untitled-1 (c) 2022 | |
| Created: 2022-01-25 20:06:02 | |
| Desc: Attach some dom element on the bottom of screen as absolute, triggered to move on resize address bar. | |
| --> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> | |
| <style> | |
| :root { | |
| --webkit-footer-gap: 80px; | |
| } | |
| html, | |
| body { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| .wrapper { | |
| position: relative; | |
| display: block; | |
| width: 100%; | |
| height: 200vh; | |
| border: 1px red dashed; | |
| } | |
| .container { | |
| position: absolute; | |
| display: block; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100vh; | |
| border: 1px green dashed; | |
| } | |
| @supports (-webkit-touch-callout: none) { | |
| .on-footer { | |
| position: absolute; | |
| bottom: 0; | |
| transition: padding 226ms ease-out; | |
| padding-bottom: calc(100vh - var(--webkit-footer-gap) + 2%); | |
| } | |
| .webkit-gap { | |
| position: fixed; | |
| top: 0; | |
| bottom: 0; | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| z-index: -1; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="webkit-gap"></div> | |
| <div class="wrapper"> | |
| <div class="container"> | |
| iPhone Sample gap "absolute" content on resize footer address bar. | |
| <div class="on-footer">Footer content with 2% gap from bottom.</div> | |
| </div> | |
| </div> | |
| </body> | |
| <script> | |
| new ResizeObserver((entries) => { | |
| entries.forEach((entry) => { | |
| //const windowFullHeight = parseFloat(window.outerHeight); | |
| document.documentElement.style.setProperty("--webkit-footer-gap", `${entry.contentRect.height}px`); | |
| }); | |
| }).observe(document.querySelector(".webkit-gap")); | |
| </script> | |
| </html> |
See new CSS attributes:
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Sample:
