Dynamisches Anpassen der Höhe einer Karte in HTML/CSS ⇐ HTML

[Guest]

Ich habe eine Karte, die sich auf Mobilgeräten von unten öffnet. Sie nimmt je nach Bildschirm eine bestimmte Höhe ein. Das Problem besteht darin, dass der Inhalt dieser Karte möglicherweise abgeschnitten wird, wenn der Bildschirm zu schmal und zu hoch ist. Ich habe mehrere Lösungen ausprobiert, aber bisher ist es möglicherweise auf einigen Geräten sichtbar, auf anderen jedoch nicht (insbesondere auf iOS-Geräten).

Code: Select all

@media (max-width: 1025px) {
.card.open {
height: auto; /* Allow content to determine height */
min-height: 75vh; /* Minimum height to ensure good UX when opening */
max-height: 85vh; /* Prevent from taking full screen */
bottom: 0;
padding-bottom: 60px; /* Space for the fixed bottom button */
}

.button-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background: #fff;
padding: 16px;
z-index: 999;
}

/* Handle iOS safe area */
@supports (padding: max(0px)) {
.card.open {
padding-bottom: calc(60px + env(safe-area-inset-bottom));
}

.button-container {
padding-bottom: max(16px, env(safe-area-inset-bottom));
}
}

Code: Select all

[img]{% static [/img]


[img]{% static [/img]
Adresse

{{ address }}





[img]{% static [/img]
Ma formule

[list]
[*]
{{ dishes_per_week }} plats par semaine
{{ service_price_before_no00 }}€

[*]
{{ ppl }} personnes


{% if suivi_price %}
[*]
Un suivi nutritionnel
{{ suivi_price }}€

{% endif %}
[/list]


Crédit d'impôt (-50%)
[url=#]
[img]{% static [/img]
[/url]

{{ reimbursment }}€

Prix par plat après Crédit d'Impôt
{{ price_per_dish }}€




[img]{% static [/img]
Vos plats

Plats sélectionnés
0/{{ dishes_per_week }}

Estimation des courses
0€






Total à avancer aujourd'hui
0€
Prix après crédit d'impôt
0€
Économisez {{ reimbursment }}€

Ich habe versucht, Prozentsätze in der Höhe und in vh-Einheiten zu verwenden, und ich habe sogar Calc verwendet . Ich habe auch @supports ausprobiert und nichts hat funktioniert.
Hier sind einige Bilder, um einen Kontext zu schaffen (eines mit zu viel Platz und eines abgeschnitten)
Unten abgeschnitten (Webbrowser-Mobilsimulator iPhone 14)
Zu viel Platz unten (mein eigenes Android Samsung S24 Ultra)