3 ms·

It's still a huge PITA and requires all sorts of subtle understandings. Even in tailwindcss it's not simple, you need to think about what kind of element is it

• plagiarist 3y ago
  Here's a puzzle I had from the olden days: how do you do webpages with header and footer such that the footer is always at least as far down as the window height, but if the content is less than enough to push the footer below the fold it should be centered. I remember that being far harder than it needed to be. I was a child though so maybe I just didn't get CSS well enough.
  • tracker1 3y ago
    Really wasnt a great experience... You could do similar with tables, everything was tables. But you had to keep your open and close in check across the page. Templating frameworks were less flexible earlier on. Sucked when say a large corporate team did headers and footers separate from your app team. Flexbox today is better IMO.
  • logicprog 3y ago
    In modern CSS I'd try this: make a super element around the header and content, set the min-height of that to 100vh, and the display to flexbox, with flex-flow: column nowrap; and then align-items: center;
    • MalcolmDwyer 3y ago
      But watch out for 100vh on mobile. It doesn't account for the sometimes there, sometimes not there address bar. To solve that, there's svh (small), lvh (large), and dvh (dynamic). If you want to make a div stretch to the height of the window, so that something can appear exactly at the bottom before scrolling, { height: 100vh; height: 100svh; } works best... the first line is there as a fallback for the few browsers that don't yet support svh... and if svh is supported it will replace the first line.
      • deleted 3y ago
        [deleted]
    • WorldMaker 3y ago
      These modern days I'd personally skip over flexbox and use CSS Grid. I find grid-template-areas such a nicer to read map than trying to decipher complex nests of flexbox and I'm finding more every day that I prefer CSS Grid even in places that don't seem to be 2D layouts yet and could just be 1D flexbox.
  • Sateeshm 3y ago
    Assuming body has header, main, and footer... body { display: grid; grid-template-rows: auto 1fr auto; min-height: 100dvh; } main { display: grid; align-content: center; }