Как задать высоту блоку по содержимому?
Нужно, чтобы высота header’a определялась содержимым и была адаптивна, у меня почему-то при каждом разрешении она остаётся одинаковой.
- Вопрос задан более трёх лет назад
- 25445 просмотров
Комментировать
Решения вопроса 0
Ответы на вопрос 1
Ankhena @Ankhena Куратор тега CSS
Нежно люблю верстку
Высота div по умолчанию считается по содержимому. Ну и еще у вас задана минимальная высота. Соответственно, пока контента меньше, чем на 450px, высота блока будет одинаковой и равной этим 450px.
Либо содержимое float или абсолюты или что-то в таком роде.
Если высота считает не так, значит вы показали не все стили, влияющие на этот элемент.
height
CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если box-sizing имеет значение border-box , то свойство будет определять высоту области рамки.
Интерактивный пример
Атрибуты min-height и max-height при добавлении меняют значение height .
Синтаксис
/* Значения-ключевые слова */ height: auto; /* значения */ height: 120px; height: 10em; /* значения */ height: 75%; /* Глобальные значения */ height: inherit; height: initial; height: unset;
Значения
Высота — фиксированная величина.
Высота в процентах — размер относительно высоты родительского блока.
Браузер рассчитает и выберет высоту для указанного элемента.
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
Внутренняя максимальная предпочтительная высота.
Внутренняя минимальная предпочтительная высота.
Высота содержащего блока минус вертикальные margin , border и padding .
- внутренняя минимальная высота
- меньшая из внутренней предпочтительной высоты и доступной высоты
Формальный синтаксис
height =
auto | (en-US)
(en-US) | (en-US)
min-content | (en-US)
max-content | (en-US)
fit-content( (en-US) )
=
| (en-US)
Пример
HTML
div id="taller">Я 50 пикселей в высоту.div> div id="shorter">Я 25 пикселей в высоту.div> div id="parent"> div id="child">Моя высота - половина от высоты родителя.div> div>
CSS
div width: 250px; margin-bottom: 5px; border: 2px solid blue; > #taller height: 50px; > #shorter height: 25px; > #parent height: 100px; > #child height: 50%; width: 75%; >
Результат
Проблемы доступности
Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста.
- MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
- Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
| Specification |
|---|
| CSS Box Sizing Module Level 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |
| Начальное значение | auto |
|---|---|
| Применяется к | все элементы, кроме незаменяемых строчных элементов, табличных колонок и групп колонок |
| Наследуется | нет |
| Проценты | Процент для генерируемого блока рассчитывается по отношению к высоте содержащего блока. Если высота содержащего блока не задана явно (т.е. зависит от высоты содержимого), и этот этот элемент позиционирован не абсолютно, значение будет auto . Процентная высота на корневом элементе относительна первоначальному блоку. |
| Обработка значения | процент, auto или абсолютная длина |
| Animation type | длина, проценты или calc(); |
Поддержка браузерами
BCD tables only load in the browser
Смотрите также
- Блочная модель, width , box-sizing , min-height , max-height
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
Размеры
Легко создавайте элемент такой же ширины или высоты с помощью наших утилит для ширины и высоты.
На этой странице
По отношению к родителю
Утилиты ширины и высоты генерируются из служебного API в _utilities.scss . По умолчанию включает поддержку 25% , 50% , 75% , 100% и auto . Измените эти значения, если Вам нужно создать здесь разные утилиты.
Ширина 100%
Ширина авто
div class="w-25 p-3" style="background-color: #eee;">Ширина 25%div> div class="w-50 p-3" style="background-color: #eee;">Ширина 50%div> div class="w-75 p-3" style="background-color: #eee;">Ширина 75%div> div class="w-100 p-3" style="background-color: #eee;">Ширина 100%div> div class="w-auto p-3" style="background-color: #eee;">Ширина автоdiv>Высота 100%
Высота авто
div style="height: 100px; background-color: rgba(255,0,0,0.1);"> div class="h-25 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 25%div> div class="h-50 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 50%div> div class="h-75 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 75%div> div class="h-100 d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота 100%div> div class="h-auto d-inline-block" style="width: 120px; background-color: rgba(0,0,255,.1)">Высота автоdiv> div>Вы также можете использовать утилиты max-width: 100%; и max-height: 100%; при необходимости.
Placeholder
Максимальная ширина 100%
img src=". " class="mw-100" alt=". ">Максимальная высота 100%
div style="height: 100px; background-color: rgba(255,0,0,.1);"> div class="mh-100" style="width: 100px; height: 200px; background-color: rgba(0,0,255,.1);">Максимальная высота 100%div> div>Относительно области просмотра
Вы также можете использовать утилиты для установки ширины и высоты относительно области просмотра.
div class="min-vw-100">Минимальная ширина 100vwdiv> div class="min-vh-100">Минимальная высота 100vhdiv> div class="vw-100">Ширина 100vwdiv> div class="vh-100">Высота 100vhdiv> Sass
API утилит
Утилиты размера указаны в нашем API утилит в scss/_utilities.scss . Узнайте, как использовать API утилит.
"width": ( property: width, class: w, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-width": ( property: max-width, class: mw, values: (100: 100%) ), "viewport-width": ( property: width, class: vw, values: (100: 100vw) ), "min-viewport-width": ( property: min-width, class: min-vw, values: (100: 100vw) ), "height": ( property: height, class: h, values: ( 25: 25%, 50: 50%, 75: 75%, 100: 100%, auto: auto ) ), "max-height": ( property: max-height, class: mh, values: (100: 100%) ), "viewport-height": ( property: height, class: vh, values: (100: 100vh) ), "min-viewport-height": ( property: min-height, class: min-vh, values: (100: 100vh) ),
- Разработан и построен с любовью в мире командой Bootstrap с помощью наших участников.
- Код под лицензией MIT, документация CC BY 3.0.
- Текущая версия v5.0.2.
Как сделать высоту блока по содержимому css
На этой странице:
- Свойства width и height
- Переполнение содержимым
- Ограничение ширины и высоты
- Проблемы размеров
- Решение проблемы размеров
- Декларация DOCTYPE
- Вёрстка потоком
- Значение auto
- Горизонтальное форматирование
- Вертикальное форматирование
Свойства width и height
Свойства width и height задают ширину и высоту элемента, под которыми понимаются размеры области содержимого элемента (без рамок, внутренних и внешних отступов).
Эти свойства игнорируются для строчных незамещаемых элементов.
Значение auto для свойства width вычисляется так, чтобы общая ширина элемента вместе со всеми отступами и рамками точно равнялась ширине родителя (значению его свойства width ). Значение auto для свойства height вычисляется по реальной высоте содержимого элемента.
width и height Значения: | | auto | inherit По умолчанию: auto Область применения: блочные и замещаемые строчные элементы Наследование: нет Проценты: относительно соответствующих размеров блока-контейнера Примечание: отрицательные значения для размеров и процентов не допускаются Файл style.css P.first
Файл index.htm Переполнение содержимым
Если размеры элемента малы, возникает опасность переполнения его содержимым. Для управления такой ситуацией CSS предлагает свойство overflow .
По умолчанию работает значение visible : содержимое будет видимо при переполнении.
overflow Значения: visible | hidden | scroll | auto | inherit По умолчанию: visible Область применения: блочные и замещаемые строчные элементы Наследование: нет Для иллюстрации значений свойства overflow будем использовать следующую пару HTML/CSS:
Вы можете посмотреть, как браузер обрабатывает переполнение, если свойство overflow не задано.
visible
Значение visible действуют по умолчанию, то есть работает так, как и при отсутствии указания overflow .
По стандарту содержимое в этом случае должно выходить за границы элемента.
Браузер IE-6 нарушает стандарт, растягивая область содержимого элемента.
scroll
Значение scroll обеспечивает область содержимого полосами прокрутки независимо от того, переполняется она или нет.
auto
Значение auto обеспечивает область содержимого полосами прокрутки только в том случае, если она переполняется.
hidden
Значение hidden обрезает содержание, которое выходит за пределы области содержимого элемента.
Ограничение ширины и высоты
Если имена свойств width и height снабдить приставкой min- или max- , получим имена свойств, ограничивающие ширину и высоту элемента.
Одно из наиболее частых применений — ограничение ширины “резиновой” страницы. При уменьшении окна наступает момент, когда браузерам становится трудно выполнить вёрстку и разметка рушится: блоки наползают друг на друга или проваливаются вниз.
Браузер, при переходе через ограничение минимальной ширины, включает горизонтальную прокрутку, не пытаясь сверстать страницу в неудобных размерах.
min-width и min-height Значения: | | inherit По умолчанию: 0 Область применения: все элементы, кроме незамещаемых строчных и элементов таблиц Наследование: нет Проценты: относительно ширины/высоты блока-контейнера Примечание: IE поддержимает эти свойства только с версии IE-7 Одно из наиболее частых применений — ограничение ширины “резиновых” колонок текста или всей “резиновой” страницы.
Как известно, читать текст, в котором слишком длинные (или слишком короткие) строки некомфортно. Оптимальная длина строки зависит от разных параметров, таких как, размер, жирность, тип шрифта, ширина межстрочных и межсимвольных промежутков. Приблизительно можно считать, что оптимум составляет 40–60 символов, минимум — 30, а максимум — 80 символов.
max-width и max-height Значения: | | none | inherit По умолчанию: none Область применения: все элементы, кроме незамещаемых строчных и элементов таблиц Наследование: нет Проценты: относительно ширины/высоты блока-контейнера Примечание: IE поддержимает эти свойства только с версии IE-7 Проблемы размеров
- внутренний отступ в 10 пикселов;
- внешний отступ в 20 пикселов;
- чёрная сплошная рамка толщиной в 5 пикселов;
- ширина 400 пикселов;
- высота 300 пикселов.
Пусть блок задан при помощи кода:
Содержимое блокаНапишем для area такое определение: .area
По стандарту W3C ширина и высота относятся к содержимому блока.
Браузеры, построенные на движке Gecko (например, Mozilla Firefox), и браузер Opera точно следуют в этом вопросе стандарту W3C.
А вот браузеры Internet Explorer версий 5 и 6 трактуют ширину и высоту блока по-другому. Они считают, что заданная в определении ширина и высота относится ко всему блоку в целом, исключая внешние отступы .
- ширина содержимого:
400-10-10-5-5=370 пикселов; - высота содержимого:
300-10-10-5-5=270 пикселов.
Эта разница приводит к краху блочной разметки в устаревших (но ещё популярных) версиях IE, если разработчик следовал стандартам.
Указанная особенность полностью относится к IE пятых версий и к версии IE6, если в декларации DOCTYPE (см. ниже на этой странице) указан стандарт Transitional (или Frameset). Модель Strict браузер IE6 обрабатывает уже по стандарту W3C.
Решение проблемы размеров
Самый простой способ избежать обозначенной проблемы — не задавать внутренние отступы и границы для блока, если для него указаны ширина или высота. Отступы и границу можно задавать для родителя или потомков. Если такое решение невозможно, то надо воспользоваться известными трюками, один из которых описан ниже.
Итак, надо объявить ширину блока в 400 пикселов. Если у блока нет внутренних отступов и рамок, то просто пишем width:400px — это будет будет работать для всех браузеров, которые понимают CSS.
Если общая ширина внутренних отступов и рамок по горизонтали составляет 50 пикселов, то для браузеров IE5 и IE6 надо указывать width:450px , а для остальных по-прежнему width:400px . Проблему решает следующий CSS-код:
.area < width:400px; /* Для хороших старых браузеров */ \width:450px; /* Обман для IE5 и IE6 */ w\idth:400px; /* Для всех новых хороших браузеров */ >
Трюк основан на использовании символа “ \ ” — обратной косой черты. Это допустимый символ, описанный в стандарте CSS. Он используется в качестве модификатора, меняющего специальный смысл следующего за ним знака на обычный.
Например, этот символ можно использовать для того, чтобы поместить обычные кавычки внутрь служебных:
"Фото 5\"А\" класса"
Обратная косая черта отменяет специальный смысл кавычки, которая следует непосредственно за ней.
А если у символа нет специального смысла? Значит, и отменять нечего, символ остаётся прежним. Использовать обратную косую черту можно не только в записи строки, но и в записи названий свойств. Таким образом, \width и w\idth полностью эквивалентны width . Какой же смысл в приведённом трюке?
.area <
Первая строка уловки — для тех браузеров, которые работают по стандарту, но не понимают модификатора (к ним относится, например, браузер Opera 5). Эти браузеры будут рассматривать символ “ \ ”, как обычный знак, входящий в состав имени свойства, не “узнают” width и пропустят строки 2 и 3.
Вторая строка — для браузера IE5, который работает не по стандарту, не считает обратную косую черту модификатором в середине слова, но, по счастью, считает этот знак модификатором, если с него слово начинается. Таким образом, IE5 (и IE6, если он работает в режиме IE5) сначала прочитает 400px в первой строке, потом изменит это значение на 450px из второй строки, а третью строку проигнорирует.
Третья строка — для совсем хороших браузеров: тех, которые работают во всём по стандарту, в том числе правильно понимают символ обратной косой черты.
Пример построения блока
Пусть требуется построить блок area , изображённый на рисунке.
Решением будет следующий набор CSS-определений:
.area < background:#a7fbc0; margin:15px; border:5px solid #4d4d4d; padding:20px; width:400px; /* Для хороших старых по стандарту */ \width:450px; /* Обман для IE5 */ w\idth:400px; /* Для всех новых хороших по стандарту */ height:300px; /* Для хороших старых по стандарту */ \height:350px; /* Обман для IE5 */ he\ight:300px; /* Для всех новых хороших по стандарту */ >
Нельзя было записать h\eight по следующей причине. Знак “ \ ” используется и для кодирования символов 16-ричными цифрами. Если за обратной косой чертой следует один из знаков 0–9, a, b, c, d, e, f, то это воспринимается как начало 16-ричного кода.
Декларация DOCTYPE
Полный HTML-код последнего примера имеет вид:
В тег < HTML >добавлен атрибут lang с указанием русского языка, но главное, перед HTML появился странный элемент DOCTYPE . Мы теперь всегда так будем начинать свои HTML-коды.
Дело в том, что браузер должен знать, на каком языке написана страница, чтобы правильно отобразить её на экране (или другом устройстве). Для этого в первой строке кода необходимо записывать конструкцию DOCTYPE .
DOCTYPE является ключевым компонентом в совместимости страниц, кроме того, выбор DOCTYPE влияет на поведение вашей Web-страницы в различных браузерах.
Джеффри Зельдман, «Web-дизайн по стандартам»
Очень сильно влияет! Ваша визуальная разметка, выполненная средствами CSS по стандартам W3C, может потерпеть крах на экране, если DOCTYPE не будет записан.
Элемент DOCTYPE предназначен для указания соответствия кода документа одному из стандартов W3C. Браузер, в зависимости от стандарта, по-разному интерпретирует элементы на странице.
Элемент DOCTYPE — это, скорее даже не элемент, а описание (декларация), имеющее свой собственный синтаксис.
Декларацию DOCTYPE помещают перед элементом HTML , она начинается с восклицательного знака и записывается прописными буквами.
Варианты DOCTYPE для HTML 4.01 приводятся ниже.
- Strict (строгий)
- Transitional (переходный)
- Frameset (аналогичен Transitional, но с фреймами)
Вариант Strict
Код не содержит элементов и атрибутов, помеченных W3C как «устаревшие» или «не одобряемые» (например: CENTER , FONT , S , U , align , background , bgcolor , color , size ).
Декларация записывается в виде:
Вариант Transitional
Код может содержать устаревшие теги, вариант введён в целях совместимости со старыми версиями HTML.
Декларация записывается в виде:
Вариант Frameset
Аналогичен Transitional, но содержит также элементы для создания наборов фреймов.
Декларация записывается в виде:
Какой вариант DOCTYPE выбрать?
Вариант Frameset отбрасываем сразу, так как фреймы — это рудимент прошлого века, и использовать их мы не собираемся.
В переходной период, когда браузеры не на 100% поддерживают стандарты, ничего другого не остаётся для практики, как выбрать переходной стандарт Transitional.
Таким образом, код любой нашей странички должен иметь такой вид:
Атрибут lang со значением ru определяет русский язык в качестве базового языка на страничке.
Информация о языке, определённая атрибутом lang , может быть использована Пользовательским Агентом (ПА) для управления представлением различными путями.
- содействие поисковым машинам;
- содействие речевым синтезаторам;
- помощь ПА в выборе вариантов глифов для высококачественной печати;
- помощь ПА в выборе вариантов кавычек;
- помощь ПА в принятии решений о дефисах, лигатурах и пробелах;
- помощь программам проверки правописания.
Цель атрибута lang — создать ПА условия для более понятного представления содержимого на базе принятой для данного языка культурной практики.
Вёрстка потоком
Давайте посмотрим, как браузер выполняет вёрстку страницы на экране по умолчанию. Алгоритм, описанный ниже, называют или просто .
Элемент HTML визуально совпадает с окном браузера. В него вложен элемент BODY , который по умолчанию имеет отступы от границ родителя (то есть от границ окна).
Внутри BODY располагается цепочка блочных элементов. Даже если разработчик записал строчный элемент или неразмеченный фрагмент текста, он будет помещён в специально созданный блочный (безымянный) элемент автоматически.
По умолчанию браузер выводит блочные элементы друг за другом сверху вниз. При этом ширина блочного элемента совпадает с доступной шириной родителя (его свойством width ), а высота определяется по содержимому.
Каждый раз, когда внутри блока обнаруживаются блочные элементы, они строятся на экране прямоугольниками сверху вниз по ширине родителя.
Если в блоке есть смесь блочных и строчных элементов (на уровне прямых потомков), то все строчные элементы (а также неразмеченный текст) собираются в безымянные блоки и строятся по описанному выше алгоритму построения блоков.
Если внутри блока нет других блоков, а только строчные элементы, браузер выводит их в строку, пытаясь заполнить всю ширину родительского блока. Если материал в одной строке не умещается, он переносится на следующие строки.
Строки по умолчанию выравниваются со стороны, принятой для текущего языка (слева для русского).
При изменении ширины окна браузер перевёрстывает страницу: ширину блоков подгоняет под новый размер, ширину строк под изменившуюся ширину содержащих их блоков. В силу этого вёрстку потоком часто называют .
Значение auto
Построим страницу с тремя абзацами. Для второго абзаца укажем ширину, высоту, отступы и рамку и посмотрим, как результат согласуется с алгоритмом работы потока.
Файл style.css
.area
Файл index.htm Создаётся впечатление, что второй абзац выпадает из потока: его ширина не равна ширине родителя BODY .
Впечатление неверное: мы забыли про внешние отступы. Да, но отступ справа совсем не похож на 15 пикселов, он существенно больше!
Внешний отступ справа изменён на auto . Для языков с чтением справа налево, в auto был бы преобразован левый внешний отступ. Браузер обязан уложить элемент в поток, даже ценой нарушения CSS-указаний.
Конечно, больше! Он такой, что общая ширина абзаца (со всеми отступами и рамками) в точности равняется ширине родителя BODY по алгоритму потока.
Да, но мы задали все внешние отступы равными 15 пикcелов: margin:15px ! Это так, но чтобы уложить абзац в поток, браузер проигнорировал наш правый отступ, заменив его на auto . Так он поступает при вёрстке документов, в которых тексты читаются слева направо.
Был продемонстрирован пример, в котором браузер заменяет заданный внешний отступ справа на auto , чтобы уложить элемент в поток. Однако значение auto можно явно указывать в CSS-правилах для внешних отступов и размеров. Рассмотрим работу значения auto отдельно по горизонтали и вертикали.
Горизонтальное форматирование
Горизонтальным форматированием блока можно управлять при помощи семи свойств:
- margin-left — внешний отступ слева;
- border-left — рамка слева;
- padding-left — внутренний отступ слева;
- width — ширина содержимого;
- padding-right — внутренний отступ справа;
- border-right — рамка справа;
- margin-right — внешний отступ справа.
Только 3 свойства из 7 могут принимать значение auto :
Алгоритмы работы этих свойств при значении auto основаны на общем правиле горизонтального форматирования потока.
Сумма размеров горизонтальных компонентов блока в потоке всегда равна значению width родителя.
Если одному из свойств margin-left , width или margin-right задано значение auto , а для остальных — определённые значения, то свойство, заданное, как auto , определяет размер, необходимый для размещения блока по ширине родителя.
На этом правиле основан способ выравнивания блока по отношению к родителю.
.block
.blockБлок с автоматическим свойством width растягивается до пределов заданных отступов.
Растягивание содержимого блока до заданных отступов:
.block
Если оба отступа установлены в auto , для них устанавливается одинаковый размер, и блок центрируется.
Выравнивание по центру:
.block
Браузеры IE пятых версий не центрируют блок таким образом. Эту ошибку IE5.* можно компенсировать другой ошибкой этих браузеров: по указанию text-align:center браузеры IE5.* центрируют не только текст (как требует стандарт), но и блоки.
В этом гипертекстовом документе для центрирования BODY относительно HTML применён следующий трюк:
HTML < text-align: center; /* Центрирование BODY для IE5 */ >/* Определения для блока BODY, вложенного в блок HTML */ BODY < margin: 10px auto; /* Выравнивание BODY по центру (по стандарту)*/ text-align: left; /* Восстановление выравнивание текста слева */ >
Посмотрим теперь, как будут вычисляться размеры, если присвоить значение auto одному из отступов и ширине.
В данном случае в нуль обращается отступ margin-right .
.block < margin-left:50px; >Отступ со значением auto обращается в нуль, а width принимает значение, необходимое, чтобы блок заполнил ширину родителя.
Если значение auto принимают все три свойства, оба отступа обращаются в нуль, а ширина становится максимальной.
Наконец, если всем трём свойствам заданы определённые значения, то свойству margin-right принудительно присваивается auto для языков с написанием слева направо. Для языков с написанием справа налево в auto устанавливается свойство margin-left .
Примеры
Файл style.css
.area
Файл index.htm .area < . . >HTML-код остался прежним.
Вертикальное форматирование
Вертикальным форматированием блока можно управлять при помощи семи свойств, задающих размеры:
- margin-top — внешний отступ сверху;
- border-top — рамка сверху;
- padding-top — внутренний отступ сверху;
- height — высота содержимого;
- padding-bottom — внутренний отступ снизу;
- border-bottom — рамка снизу;
- margin-bottom — внешний отступ снизу.
Только 3 свойства из 7 могут принимать значение auto :
Алгоритмы работы этих свойств при значении auto основаны на общем правиле вертикального форматирования потока.
По вертикали блок в потоке стремится занять размер по содержимому этого блока.
Если для свойств margin-top или margin-bottom задано значение auto , им автоматически присваивается нулевое значение.
Размер блока со значением height:auto определяется таким образом, чтобы его высоты как раз хватило для размещения содержимого.