4 ms·
Ironically this and (avoid 100vh on mobile web) https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html https://chanind.github.io/javascr
by plondon514 7y ago
Ironically this and (avoid 100vh on mobile web) https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html https://chanind.github.io/javascript/2019/09/28/avoid-100vh-... are on the front page at the same time.
- benmarks 7y agoThis seems more like coincidence than irony.
- reissbaker 7y agoThe irony is that this "sticky footer" CSS uses a min-height: 100vh as part of achieving its effect.
- Silhouette 7y agoAlthough the article does end with a warning about cross-browser CSS being a bit more involved, and if you look at the full source code it links to, this is one of the issues it addresses.
- sanderdlm 7y agoAnd both of these "articles" are hardly worth their title let's be honest. This sticky footer one could just be a link to the flex-grow documentation on the MDN, and it's not even a real sticky footer. The 100vh one comments on an issue that we've known about since responsive design became a thing in 2011 (2012?). Also, putting "A Better Solution: javascript" at the end of a blog post about a CSS problem is a joke.
- amelius 7y agoCSS is just broken. I want to use general expressions like height = a.height + b.height - 2*c.height
- kaishiro 7y agoYou can! :root { --header-height: 5em; --container-height: 25em; --other-height: 2.5em; } div { height: calc(var(--container-height) - var(--header-height) + (var(--other-height)*2)); }
- amelius 7y agoBut this example uses static sizes, unlike the sticky footer problem of the article (where e.g. the window can be resized by the user). Can CSS calc() be used with dynamic widths or heights of other elements?