Css увеличить высоту блока

height

Любой HTML-элемент сам по себе по высоте равен нулю. Обычно элементы подстраиваются по высоте под то количество контента, которое лежит у него внутри. Но что делать, если дизайнер придумал иначе, или если внутри вообще ничего нет?

При помощи свойства height можно задать высоту любому блочному (block) или строчно-блочному (inline-block) элементу. Высоту можно задавать как в абсолютных единицах (пикселях px ) так и в относительных (проценты, vh , vmin , rem и так далее).

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

Для максимальной высоты мы пишем свойство max — height . И тогда элемент будет иметь возможность растягиваться по высоте до тех пор, пока не достигнет размера, указанного в свойстве max — height . И дальше не растянется ни на пиксель.

Пример

Скопировать ссылку «Пример» Скопировано

 div class="container"> div class="item">div> div>    Скопировать Скопировано Не удалось скопировать   

 .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA;> .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF;> .container  /* высота родителя */ height: 150px; padding: 25px; background-color: #AFC9DA; > .item  /* высота вложенного блока */ height: 50px; margin: 0 10px; background-color: #FFFFFF; >    Скопировать Скопировано Не удалось скопировать   

Поскольку оба блока — .container и .item — пустые, в них нет контента, то без стилей их высота будет равна нулю. Мы изменили это, задав элементу .container высоту 150px , а элементу .item высоту 50px .

Добавим контент в элемент .item :

Из-за фиксированной высоты контент вываливается из блока. Как можно это исправить? Заменить height на min — height !

 .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF;> .item  /* Меняем фиксированную высоту на минимальную */ min-height: 50px; margin: 0 10px; background-color: #FFFFFF; >    Скопировать Скопировано Не удалось скопировать   

Теперь, если контента внутри не будет, то высота блока будет равна 50px , но как только появится контент — элемент растянется по высоте так, чтобы уместить в себе весь контент!

Как понять

Скопировать ссылку «Как понять» Скопировано

Свойство height даёт возможность менять высоту любого блока на своё усмотрение.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Пишем свойство height для фиксированной высоты, min — height для минимальной высоты и max — height для максимальной высоты.

Для элемента можно написать только одно из них, два или все три сразу, если это нужно для решения конкретной задачи.

В качестве значения пишем число, а за ним без пробела единицу измерения: px , % , vh , rem , em или любую другую единицу измерения, доступную в вебе.

 div  height: 10px; min-height: 100%; max-height: 100vh;> div  height: 10px; min-height: 100%; max-height: 100vh; >    Скопировать Скопировано Не удалось скопировать   

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство высоты не наследуется.

💡 По умолчанию задаётся значение auto .

Это ключевое слово бывает полезно, когда нужно сбросить высоту, заданную ранее. Например, оно пригодится при доработке сайта, к исходным стилям которого нет доступа.

Стили, до которых нет доступа с фиксированной высотой:

 .container  height: 150px;> .container  height: 150px; >    Скопировать Скопировано Не удалось скопировать   

Твои стили, где перезаписывается предыдущее значение: теперь высота подстраивается под контент.

 .container  height: auto;> .container  height: auto; >    Скопировать Скопировано Не удалось скопировать   

Также оно может пригодится при адаптивной вёрстке.

💡 Не задавайте фиксированную высоту блокам, в которых есть контент. Если контента станет больше, то блок не растянется и контент из него выпадет. Не надо так. Если без высоты никак не обойтись, то используйте min — height .

💡 Строчные элементы не реагируют на height . Хотите изменить высоту? Меняйте элемент со строчного ( inline ) на блочный ( block ) или строчно-блочный ( inline — block )!

💡 Пишете height : 100 % и ничего не работает? Помните, что высота в процентах рассчитывается от высоты родителя. И сработает, только если у родителя задана эта самая высота.

Отношения родительский-дочерний элемент проще объяснить на примере.

 div class="parent"> div class="child child-1"> div class="grandchild">div> div> div class="child">div> div class="child">div> div>    Скопировать Скопировано Не удалось скопировать   

В примере выше элемент с классом parent является родительским для элементов с классом child . Они, в свою очередь, будут называться дочерними по отношению к элементу с классом parent .

Для элемента с классом grandchild родительским будет элемент с классом child — 1 .

Применительно к нашей ситуации элемент grandchild будет наследовать свою высоту от элемента child — 1 .

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Чаще всего не требуется задавать фиксированную высоту блокам с контентом. Можно обойтись внутренними отступами ( padding ).

Вернёмся к примеру, который разбирали выше. Можно совсем убрать свойство height и заменить его на padding : 25px . Теперь, если контента внутри блока нет, то внутренние отступы сверху (25 пикселей) и снизу (25 пикселей) будут растягивать элемент на 50 пикселей.

Как только добавится контент, блок растянется, не произойдёт никакого выпадения контента, потому что не задана фиксированная высота. От верхнего и нижнего краёв контента до верхнего или нижнего краёв блока соответственно будут отступы в 25 пикселей.

Чтобы родительский блок .container тоже подстраивался под размеры контента, можно:

1. Заменить фиксированную высоту на минимальную: min — height : 150px .

1. Убрать высоту совсем и заменить её на внутренние отступы ( padding ). Этот вариант подойдёт, если не принципиально сохранить высоту 150 пикселей.

🛠 Но есть несколько ситуаций, в которых без высоты никак.

1. В блоке нет контента. Он декоративный. Например, квадрат. Задаём одинаковые высоту и ширину. Profit!
2. Первый экран сайта. Обычно дизайнеры хотят, чтобы первый экран всегда был по высоте не больше и не меньше высоты экрана пользователя. В этом случае поможет height : 100vh . Не забудь подстраховаться и задать минимальную высоту блоку. Например: min — height : 350px . Никогда нельзя быть уверенным, что высоты экрана пользователя достаточно для того, чтобы уместился весь важный контент.

🛠 В реальных задачах крайне редко требуется задавать высоту в относительных единицах rem и em . Эти единицы завязаны на размере шрифта. Рассчитывать высоту блока от размера текста почти никогда не требуется.

Но другие относительные единицы: vh , vw , а также vmin и vmax — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Источник

height

The height CSS property specifies the height of an element. By default, the property defines the height of the content area. If box-sizing is set to border-box , however, it instead determines the height of the border area.

Try it

The min-height and max-height properties override height .

Syntax

/* values */ height: 120px; height: 10em; height: 100vh; /* value */ height: 75%; /* Keyword values */ height: max-content; height: min-content; height: fit-content(20em); height: auto; /* Global values */ height: inherit; height: initial; height: revert; height: revert-layer; height: unset; 

Values

Defines the height as a distance value.

Defines the height as a percentage of the containing block’s height.

The browser will calculate and select a height for the specified element.

The intrinsic preferred height.

The intrinsic minimum height.

Box will use the available space, but never more than max-content

Uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, ))

Enables selecting a middle value within a range of values between a defined minimum and maximum

Accessibility concerns

Ensure that elements set with a height aren’t truncated and/or don’t obscure other content when the page is zoomed to increase text size.

Formal definition

Initial value	auto
Applies to	all elements but non-replaced inline elements, table columns, and column groups
Inherited	no
Percentages	The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to auto . A percentage height on the root element is relative to the initial containing block.
Computed value	a percentage or auto or the absolute length
Animation type	a length, percentage or calc();

Formal syntax

height =
auto |
|
min-content |
max-content |
fit-content( )

=
|

Examples

Setting height using pixels and percentages

HTML

div id="taller">I'm 50 pixels tall.div> div id="shorter">I'm 25 pixels tall.div> div id="parent"> div id="child">I'm half the height of my parent.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%; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 18, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Как задавать в css размер блока

Дело в том, что не все фрагменты на веб-странице – блоки. Элементы вообще делятся на блочные и строчные. Вторые могут спокойно записываться в одну строку и при этом им не нужно ничего дополнительно прописывать. Простой пример строчного элемента – ссылка. На одной строке может быть сколько угодно ссылок, пока они будут помещаться на ней.

Блочные элементы имеют абсолютно другое поведение. Без дополнительных манипуляций они не смогут стать в один ряд. Пример такого блока – абзац, который задается тегом p. Так вот, зачем я вам все это говорю? Это сказано для того, чтобы вы понимали – размер нужно задавать только блочным элементам, что мы и будем делать в этой статье.

Рис. 1. Основные свойства, которые помогают задать размер

Курс «Frontend-разработчик»

— Научитесь верстать сайты для всех типов устройств.

— Сможете использовать JavaScript для работы в браузере.

— 77 часов теории, 346 часов практики.

— Выполните 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Курс «веб-разработчик с нуля»

— Научитесь программировать на JavaScript и PHP.

— Сможете создавать сайты и веб-приложения.

— Сможете уверенно работать и с фронтендом, и с бэкендом веб-сервисов.

— Выполните 9 масштабных проектов для портфолио

— Помощь с поиском работы или стажировки.

Курс «PHP-разработчик с нуля»

— Научитесь создавать сайты и веб-приложения на языке PHP.

— Изучите актуальные фреймворки Laravel, Simfony и Yii2.

— 78 часов теории и 361 час практики.

— Вы создадите 5 масштабных проектов для портфолио.

— Помощь с поиском работы или стажировки.

Простые свойства для размеров

Самые простые свойства, которыми можно записать размеры – это width и height. Означают они, соответственно, ширину и высоту. К ним также можно дописывать префиксы min- и max-. В таком случае будет задаваться минимальная и максимальная ширина или высота соответственно.

Значения можно записывать в пикселях или в процентах. Иногда еще используется относительная единица em (высота шрифта), но обычно с ее помощью определяется величина текста. По умолчанию все сетки (главные структурные блоки шаблона), в которых размеры определяются в процентах, называют резиновыми. Также процентная запись помогает легко адаптировать шаблон, что тоже очень важно.

Размер в пикселях

В пикселях записывают так называемые абсолютные значения. Например, весь сайт должен находиться в контейнере шириной 1000 пикселей. Создается этот блок и ему пишется ширина.

Источник