You can use env(safe-area-inset-bottom) for this purpose. For instance, you could apply a padding like this:
.my-footer {
padding: env(safe-area-inset-bottom);
}
You can also use fallback values. For instance, if you would like a default padding of 10px in case safe-area-inset-bottom is not defined, then you can use the following:
.my-footer {
padding: env(safe-area-inset-bottom, 10px);
}