Как сделать масштаб MIN-высоты с помощью шрифта Clamp (), чтобы избежать сдвига макета? ⇐ Html

[Anonymous]

У меня есть это CSS: < /p>

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

div#appointmentsCont {
width: 80%;
max-width: 320px;
min-width: 554.5px;
}

div#appointmentsCont h3 {
font-size: clamp(19px, 3vw, 24px);
}

находится внутри контейнера, и я использую Clamp () для отзывчивого размера шрифта, который я хочу сохранить. Но когда увеличивается размер шрифта (например, 22–23px), минимальная высота не масштабируется соответствующим образом, поэтому высота контейнера больше не верна. < /P>
Почему мне нужны min-hight:
Изначально контейнер пуст и не имеет данных (я использую React, данные получены позже). Без Min-Height я вижу сдвиг макета, когда загружается содержимое. Или любое другое подобное решение, спасибо. < /P>
Я попытался установить минимальную высоту в пикселях (554,5px), но он работает только для наименьшего размера шрифта и не масштабируется, когда размер шрифта растет с зажимом ().
я также рассматривал использование Calc () с VW или другими единицами, но я не мог сделать это совпадение с фонтом. /> Контейнер всегда должен сохранять одну и ту же минимальную высоту по сравнению с размер шрифта (так что сдвиг макета при загрузке данных), что-то вроде масштабирования Min-Height автоматически точно так же, как Clamp () масштабирует размер Font. Перезагрузить несколько раз. Не существует сдвига макета, потому что min-height: 110px соответствует высоте контейнера. 110px < /Code> больше не соответствует высоте контейнера.

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

setTimeout(() => {
document.getElementById("appointmentsCont").innerHTML = `
Loaded title
Some content
`;
}, 1000);< /code>
* {
box-sizing: border-box;
font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
}

#appointmentsCont {
width: 80%;
max-width: 320px;
min-height: 110px;
background: lightgray;
margin: 1rem auto;
padding: 1rem;
border: 2px solid black;
}

div#appointmentsCont h3 {
/* Let's simulate that clamp() has minimum value of 19px */
/* font-size: clamp(19px, 4vw, 30px); */
font-size: 19px;
margin: 0px;
}< /code>

< /code>
< /div>
< /div>
< /p>


setTimeout(() => {
document.getElementById("appointmentsCont").innerHTML = `
Loaded title
Some content
`;
}, 1000);< /code>
* {
box-sizing: border-box;
font-family: 'Tahoma', 'Verdana', 'Arial', 'Helvetica', sans-serif;
}

#appointmentsCont {
width: 80%;
max-width: 320px;
min-height: 110px;
background: lightgray;
margin: 1rem auto;
padding: 1rem;
border: 2px solid black;
}

div#appointmentsCont h3 {
/* Let's simulate that clamp() reaches 30px */
/* font-size: clamp(19px, 4vw, 30px); */
font-size: 30px;
margin: 0px;
}< /code>

Подробнее здесь: https://stackoverflow.com/questions/797 ... yout-shift