Проблема с блочной моделью CSS

avatar
jateen
8 августа 2021 в 18:39
70
1
2

Я пытался понять CSS для одного из моих проектов.

У меня есть класс 'контейнер-заголовок', примененный к контейнеру div, который при проверке выглядит следующим образом -

header-container-css

header-container-css-1

У меня есть вопрос, почему содержимое div "оболочки", который является дочерним элементом div "header-container", не полностью находится внутри поля содержимого (т.е. выделенного синим полем) и может быть видно в оранжевом часть. Пожалуйста, найдите CSS для обертки div ниже -

wrapper-div

wrapper-div-1

Почему CSS элемента не соответствует блочной модели CSS? и как это можно решить?

Проект опубликован на - https://surijatin.github.io/covid-second-dose/

Источник
jateen
8 августа 2021 в 18:47
0

Забыл добавить ссылку на проект. Я отредактировал описание, чтобы включить его сейчас. Вы можете проверить, где он опубликован, и работать непосредственно над проблемой вместо минимального воспроизводимого примера. ;)

arieljuod
8 августа 2021 в 18:54
1

Проблема в том, что вы устанавливаете фиксированную высоту, поэтому содержимое переполняется, а не увеличивается контейнер. Просто удалите свойство height, и все должно быть в порядке, не знаю, зачем вам это нужно.

cloned
8 августа 2021 в 18:57
0

meta.coderhelper.com/questions/254428/… разместите здесь свой код и создайте минимальный воспроизводимый пример

Ответы (1)

avatar
Michael Benjamin
8 августа 2021 в 19:18
2

Ответ на вашем изображении:

  • .header-container имеет заданную высоту 2vh. Это ограничение по высоте.

  • Поэтому текст в .wrapper просто выходит за пределы этой фиксированной высоты.

Оранжевые секции — это установленные вами верхнее и нижнее поля размером 2vh.

Удалите height: 2vh или переключитесь на min-height: 2vh, и проблема должна быть решена.