-webkit-fill-available isn't working on 2.1.54

[huandney]

Hello,
In anki 2.1.49 I use the parameter min-height: -webkit-fill-available; to place the footer (tags and fonts). After upgrading to 2.1.54, this statement is not working.
Is this the expected result of this current version, or is there a problem?

Desired result:

Result obtained:

Note: I didn’t test the other versions, I jumped straight to 54.
OS: Fedora Linux 36

[BlackBeans]

Maybe you could try something like position: fixed; bottom: 0; instead?

[huandney]

Yes, that would be possible, but I am avoiding using this solution because besides “tags” I have “fonts”, and when I have these two fields active there would be an overlap (with a little js I could adjust it).
But my biggest question would be why min-height: -webkit-fill-available; is not working.

[BlackBeans]

A more or less random guess would be that Qt has moved away from webkit with Qt6? Besides, you could put that style in a footer tag, and put in there boths your tags and fonts.

[huandney]

Good guess, I installed the Qt5 version and everything is back to normal.

[huandney]

I had also forgotten the other problem that solutions like position: fixed; bottom: 0; can bring, when the text is too long it collides with the footer, as below:

But I found a solution to replace min-height: -webkit-fill-available; and update my model, it is min-height: calc(calc(var(--vh, 1vh) * 100) - 40px);, now it works identically in Qt6 as in Qt5 and there is no overlap problem:

[BlackBeans]

Ah yes my bad, I think the correct position is absolute, not fixed (but even that sometimes gives strange results). After a bit of research, the most modern (ie. that does what you expect it to do, and doesn’t require “complex” calculations) is to use a flexbox:

.container { 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex-grow: 1;
}

And your template might look like

<div class="container">
  <div class="content">
    Stuff...
  </div>
  <div class="footer">
    Tags and all
  </div>
</div>

This doesn’t require hard-coding the height of anything.

[huandney]

@BlackBeans

.container { 
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.content {
  flex-grow: 1
}

This is exactly the method I use, except that instead of min-height: 100vh; I used min-height: -webkit-fill-available;. I did this because using 100vh (or other values) would never make the page “correct” by creating a scrollbar (just perfectionism on my part):

[dae]

Maybe html and/or body tags need to be set to 100%?

[huandney]

You mean min-width: 100%;?
Anyway, I got the effect I wanted using the flexbox method (described above) plus min-height: calc(calc(calc(var(--vh, 1vh) * 100) - 40px);.