Sticky Footer - Hackdot

Re:Sticky Footer by sanderdlm on Monday September 30, 2019 @04:21AM (#21112835)

And 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.

[ Parent | on HN ]

Re:Sticky Footer by amelius on Monday September 30, 2019 @05:36AM (#21113245)

CSS is just broken. I want to use general expressions like

    height = a.height + b.height - 2*c.height

[ Parent | on HN ]

Re:Sticky Footer by kaishiro on Monday September 30, 2019 @08:38AM (#21114665)

You 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));
  }

[ Parent | on HN ]

Re:Sticky Footer by amelius on Monday September 30, 2019 @12:22PM (#21116993)

But 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?

[ Parent | on HN ]