owenrees/echecsfrance
1
0
Fork 0
mirror of https://github.com/TheRealOwenRees/echecsfrance.git synced 2026-07-22 20:16:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add a polyfil for dynamic viewport heights on older devices

Browse Source
This commit is contained in:
Timothy Armes
2023-07-25 11:36:55 +02:00
parent 8d67365119
commit 467c71e10b
3 changed files with 52 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tailwind.config.js
+5 -4
View File
@@ -29,12 +29,13 @@ module.exports = {
},
},
minHeight: {
// We use 100svh, falling back to vh for old browsers
// The 9rem is for the header and footer
content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
// We use 100svh, falling back to the the --1svh var that we add as a polyfill for older browsers.
// The 9rem is for the header and footer.
// In the event that the polyfill fails, we fall back to 0.9vh as a guess of how much 1svh is.
content: ["calc(var(--1svh, 0.9vh) * 100 - 9rem)", "calc(100svh - 9rem)"],
},
height: {
content: ["calc(100vh - 9rem)", "calc(100svh - 9rem)"],
content: ["calc(var(--1svh, 0.9vh) * 100 - 9rem)", "calc(100svh - 9rem)"],
},
},
},