Hacker News Reader

I remember the my 'one day'. I was messing around making a podcast app awhile back and thinking it shouldn't be hard to make a floating footer in css that's (1) always at the bottom, (2) always visible, (3) doesn't permanently occlude content and (4) doesn't require any hacks or artifacts eg. putting a same sized buffer in the scrolling content to handle item #3. Turns out it's just not possible. Great system.

View on HN

What do you mean it's not possible?

It's not possible to do without violating one of the conditions I listed. Of the solutions people have posted on SO and on blogs they either will be pushed off the screen when there's too much content (violating #2), will be pulled up to under the last rendered element if there's not enough content (#1), or will occlude content if you use absolution positioning (#3). This forces you to use an empty element of the same size as the footer, which has absolution positioning, which ends up being the element which scrolls under the footer (#4). This is what google podcasts did iirc, but it's just a hack. You'd think there'd be a simple way without having to make sacrificial elements on your page.

If the content that you don't want occluded has a bottom padding, your floating footer will be right atop that extra padding.

But further more, with flex and grids you can handle it even better. Without any hack. This doesn't sound like the most complex thing I've seen done with CSS.

You've identified the hack I already mentioned in my post. If there are simple flex or grid solutions feel free to post them.

Reply on news.ycombinator.com