Css object height 100

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 — будут встречаться вам гораздо чаще. Рассчитывать высоту элемента от высоты или ширины экрана пользователя бывает очень удобно.

Источник

How to Use CSS to Set the Height of an HTML Element to 100%

Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML.

Jessica Kormos is a writer and editor with 15 years’ experience writing articles, copy, and UX content for Tecca.com, Rosenfeld Media, and many others.

Percentage values in CSS can be tricky. When you set the height CSS property of an element to 100% what exactly are you setting it to 100% of? That’s the major question you run into when dealing with percentages in CSS, and as layouts become more complex, it becomes that much more difficult to keep track of percentages, resulting in some downright bizarre behavior, if you aren’t careful.

Working with percentages does have a distinct advantage; percentage-based layouts automatically adapt to different screen sizes. That’s why using percentages is essential in responsive design. Popular grid systems and CSS frameworks use percentage values to create their responsive grids.

Clearly, there are certain situations better suited to static values and others that work much better with something adaptive, like percentages. You’ll need to decide which route to take with the elements in your design.

Static Units

Pixels are static. Ten pixels on one device is ten pixels on every device. Sure, there are things like density and the way a device actually interprets what a pixel is, but you won’t ever see major changes because the screen is a different size.

With CSS, you can easily define an element’s height in pixels, and it will remain the same. It’s predictable.

That won’t change unless you alter it with JavaScript or something similar.

Now, there’s another side to that coin. It won’t change. That means you’ll need to measure out everything precisely, and even then, your site won’t work across all devices. That’s why static units tend to work better for child elements, media, and things that will start to distort and look strange if they stretch and grow.

Setting an Element’s Height to 100%

When you set an element’s height to 100%, does it extend to the entire screen height? Sometimes. CSS always treats percent values as a percentage of the parent element.

With No Parent Element

If you’ve created a fresh that’s only contained by your site’s body tag, 100% will probably equate to the screen’s height. That is unless you defined a height value for the .

Источник

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.

Источник