Position: fixed not working as expected

When I use the following CSS in a card template, only on AnkiMobile the element is displayed at the bottom of the card content instead of being pinned to the bottom of the screen.

If I open AnkiWeb on iOS, it is pinned to the bottom of the screen as on other platforms. So I don’t think WebKit is the cause.

Is there any way to fix this?

.alert-box {
	bottom: 0;
	left: 0;
	position: fixed;
	position: -webkit-fixed;

If you want to see whole codes, please see here.

You may need to give html and/or body a min-height of 100vh. Also, be aware that the webview uses the whole screen, so bottom:0 will cause it to display under the bottom bar.


I see, I will try it once with my code. Thank you!

Thank you dae, the idea you showed me worked well.

Also, I was inspired by the way DAE showed me how to use 100vh, but I’d like to change the css of the element I want to display to


and found that it works without having to mess with the html or body height. Anyone else having the same problem, give it a try.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.