Css высота блока задать

Урок 11. Высота и ширина блока

В прошлом уроке мы рассмотрели что такое блочная модель, внутренние и внешние отступы. В этом мы рассмотрим лишь два свойства: высоту и ширину блока. Высота в CSS задается свойством height, а ширина свойством width. Сразу посмотрим в коде на реальном примере(возьмем пример из прошлого урока):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

html> head> title>Главная/title> meta http-equiv="Content-Type" content="text/html; charset=utf-8"> link rel="stylesheet" type="text/css" href="style.css"> /head> body> div id="content"> div class="firstPar"> p>Aliquam malesuada tellus justo, eget lacinia nunc rutrum a. Phasellus dictum tempor eleifend. Nunc ut magna non purus fermentum egestas ac eu nulla./p> p>Fusce est tellus, mattis quis nisl et, egestas posuere libero. Donec scelerisque tellus porttitor massa dictum pulvinar./p> /div> div class="secondPar"> p>Cras/p> ul> li>amet condimentum/li> li>aliquam volutpat/li> li>elementum interdum/li> /ul> /div> /div> /body> /html>

1 2 3 4 5 6 7 8 9 10 11 12 13

#content{ border:2px solid #FF0000; /* красная граница */ } .firstPar{ border:2px solid #0000FF; /* синяя граница */ width:200px; /* ширина блока */ height:280px; /* высота блока */ } .secondPar{ border:2px solid #00FF00; /* зеленая граница */ }

Посмотрим как это выглядит в браузере:
Как видите мы задали определенную высоту и ширину. Если бы мы задали высоту меньше, чем помещается текст, тогда бы текст вылез за пределы блока. Поэкспериментируйте с высотой и шириной. Сначала тяжело будет на глаз определять необходимый размер в пикселях, но со временем привыкнете. Это небольшой и простой урок. Попробуйте сами изменять размеры блока и посмотрите что получиться. Практика — самый быстрый способ научиться чему-либо!

Источник

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.

Источник