Skip to content

Instantly share code, notes, and snippets.

@klich3
Created January 25, 2022 12:24
Show Gist options
  • Save klich3/d6a0a04793e6f563dd138fa5308aa69d to your computer and use it in GitHub Desktop.
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.
<!--
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>
@klich3
Copy link
Author

klich3 commented Jan 25, 2022

Sample:
Simulator Screen Recording - iPhone 13 - 2022-01-25 at 13 19 59

@klich3
Copy link
Author

klich3 commented Apr 24, 2024

See new CSS attributes:

caniuse.com/?search=dvh

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment