Динамическая регулировка высоты карты в HTML/CSS ⇐ Html

[Anonymous]

У меня есть карточка, которая открывается снизу на мобильном телефоне и занимает определенную высоту в зависимости от экрана. Проблема в том, что содержимое этой карты может быть обрезано, если экран слишком узкий и высокий. Я попробовал несколько решений, но до сих пор оно могло быть видно на некоторых устройствах, а не на других (особенно устройствах iOS).

Код: Выделить всё

@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));
}
}

Код: Выделить всё

[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 }}€

Я пробовал использовать проценты по высоте, единицы измерения vh и даже использовал калькулятор . Я также попробовал @supports, но ничего не помогло.
Вот несколько изображений, которые помогут понять контекст (одно со слишком большим пространством, другое обрезано)
Обрезано внизу (мобильный симулятор веб-браузера iPhone 14)
Слишком много места внизу (мой собственный Android Samsung S24 Ultra)


Подробнее здесь: https://stackoverflow.com/questions/793 ... n-html-css