Ответ
Высота элемента определяется несколькими факторами:
- Высота контента - текст, изображения, дочерние элементы
- CSS-свойства:
height,min-height,max-heightpadding(внутренние отступы)border(толщина рамки)box-sizing(влияет на расчет размеров)
- Поток документа - поведение соседних элементов
- Наследование - от родительских элементов
- Viewport units -
vh,%относительно родителя
Пример:
.box {
height: 200px; /* фиксированная высота */
padding: 20px; /* увеличит общую высоту если box-sizing: content-box */
border: 1px solid #000; /* +2px к высоте */
box-sizing: border-box; /* padding и border включены в height */
}Ответ 18+ 🔞
А, ну это же классика, блядь! Сейчас объясню, как эта хуйня работает, чтобы ты не ломал голову, как Герасим над судьбой Муму.
Смотри, высота любого элемента — это не просто цифра в CSS, которую ты тупо написал. Это, блядь, целая драма, как у Тургенева, только в коде. На неё влияет куча факторов, которые могут так наебать, что потом охуеешь, почему всё плывёт.
Во-первых, сам контент. Если ты в див запихнул текст на три экрана или картинку размером с лошадь, то что ты там по height ни пиши — ему, блядь, похуй, он будет тянуться, как жопа резиновая. Это основа, так сказать, натуральная высота.
Дальше идёт этот цирк с CSS-свойствами. Вот смотри, классика жанра:
.box {
height: 200px; /* Ну, вроде как фиксированная высота, да? */
padding: 20px; /* А это что? Это внутренние отступы, ёпта! */
border: 1px solid #000; /* И рамка ещё, блядь! */
box-sizing: content-box; /* И вот этот самый, сука, волшебный переключатель! */
}Вот тут-то и собака зарыта, точнее, Муму утоплена! Если box-sizing стоит content-box (а это по умолчанию часто), то height: 200px — это только для контента! А padding сверху-снизу (20px+20px=40px) и border сверху-снизу (1px+1px=2px) приплюсуются сверху, блядь! Итого реальная высота блока будет 200 + 40 + 2 = 242 пикселя! И ты такой: «Почему у меня всё съехало, ёбаный в рот?!»
А если поставить box-sizing: border-box, то это уже мудрость, блядь. Ты говоришь: «Всё, сука, включая padding и border, должно влезть в эти 200px!». Контент внутри сожмётся, но общая высота останется ровно 200. Красота!
Ну и остальная хуйня: поток документа (соседние блоки могут толкаться), наследование (родитель может не дать вырасти), эти ваши vh и проценты, которые считаются от размера окна или родителя. Один сплошной пиздец, если не понимать, как что взаимодействует.
Короче, высота — это вам не хуй собачий, это комплексная характеристика. Нужно учитывать всё, а не тыкать одну цифру и удивляться, почему всё разъехалось, как кони на льду.