←back to thread

Aspects of modern HTML/CSS you may not be familiar with

(lyra.horse)
451 points todsacerdoti | 4 comments | 28 Aug 25 20:49 UTC | HN request time: 0.001s | source
Show context
firefoxd ◴[29 Aug 25 06:04 UTC] No.45060733[source]▶
The worst thing about CSS is that a lot of people don't bother learning it, then have a strong opinion after they were forced to use it for a day.
replies(3): >>45060923 #>>45061230 #>>45070915 #
jhhh ◴[30 Aug 25 00:35 UTC] No.45070915[source]▶
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.
replies(1): >>45071256 #
1. firefoxd ◴[30 Aug 25 01:51 UTC] No.45071256[source]▶
What do you mean it's not possible?
replies(1): >>45071347 #
2. jhhh ◴[30 Aug 25 02:13 UTC] No.45071347[source]▶
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.
replies(1): >>45072341 #
3. firefoxd ◴[30 Aug 25 06:20 UTC] No.45072341[source]▶
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.

replies(1): >>45074470 #
4. jhhh ◴[30 Aug 25 13:26 UTC] No.45074470{3}[source]▶
You've identified the hack I already mentioned in my post. If there are simple flex or grid solutions feel free to post them.