CSS is awesome.
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Sander Rossel wrote:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :-D
Sorry, I should've mentioned margin in that example. The reason it's doing that is because I used `100vh`, but by default elements have a margin. So, the browser took that is `100vh` for the min height (not max height) plus a little something, something to fit the body into with its margin. It's usually not noticeable because the default height doesn't span the full view port but only the content. Here's the full document that accounts for that. I added two extra "resets" in it too (border and padding) just in case a framework tries to tinker with them since they can also have the same effect on `body`.
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Sticky Footer</title>
<meta charset='utf-8'>
<style>
html, body {
border: none;
display: flex;
flex-direction: column;
margin: 0;
min-height: 100vh;
padding: 0;
}header { background: pink; padding: 1rem; } main { flex: 1; padding: 1rem; } footer { background: cyan; padding: 1rem; } </style></head>
<body>
<header>...</header>
<main>Howdy</main>
<footer>...</footer>
</body>
</html>You'll notice I used the multiple selector `html, body`. That's not technically required these days but it's just an old compatibility trick from the years of past. It won't hurt anything to keep it with modern browsers, so I usually do. I also re-added padding after the reset in body to 1 root em so it should propagate as expected.
Jeremy Falcon
-
Jeremy Falcon wrote:
I'll leave the sticky header as an exercise, but for the sticky footer... these days all you need is this:
Doesn't work, the footer is at the bottom, but the body is pushing it down, so even with only "Howdy" I still need to scroll :D
Jeremy Falcon wrote:
And they think just because CSS isn't compiled it requires zero learning.
This is very true! People make a small website and call themselves "full stack" (I'm guilty myself). I really got to know JavaScript with my arrgh.js library (see signature), but that was 2018 and it has evolved quite a bit since. But I've seen it time and again, and as I said, I do it too, but front-end is really just an aside and an afterthought because how hard can it be.
Best, Sander Azure DevOps Succinctly (free eBook) Azure Serverless Succinctly (free eBook) Migrating Apps to the Cloud with Azure arrgh.js - Bringing LINQ to JavaScript
Oh, and to be fair, browser compatibility is where the real pain the booty comes in. Unfortunately, most browser makers (cough, cough Microsoft) hate following standards. Was even worse in the past when there was no standards committee as everyone was fighting for web dominance. But, thank God it's much better these days. Anywho, the site `Can I Use` will be your new BFF for web development as it'll list browser compatibility. You can automate all of this of course if you have a proper dev environment set up in Node, but for a quick check it's still a great site to know. Here, I'm checking to see which browsers support viewport units like `100vh`. So, they've been around for about 10 years now, which makes them pretty safe to rely on with this. For people with an old browser that doesn't support flexbox or viewport units, it just won't span the entire viewport unless there's content. No biggie. Site still works. [Viewport units: vw, vh, vmin, vmax | Can I use... Support tables for HTML5, CSS3, etc](https://caniuse.com/viewport-units)
Jeremy Falcon
