Css height default value

height

Устанавливает высоту содержимого элемента. По умолчанию высота определяется автоматически, исходя из содержимого элемента, но если задать фиксированное значение высоты, то она будет установлена, несмотря на объём содержимого. Если содержимое элемента превышает указанное значение высоты, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте свойство overflow со значением auto к стилю элемента.

Если для элемента свойство box-sizing задано как border-box , то height определяет высоту блока.

Краткая информация

Значение по умолчанию	auto
Наследуется	Нет
Применяется	Ко всем элементам, за исключением строчных, колонок таблицы
Анимируется	Да

Синтаксис

Синтаксис

Описание	Пример
	Указывает тип значения.
A && B	Значения должны выводиться в указанном порядке.	&&
A | B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal | small-caps
A || B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width || count
[ ]	Группирует значения.	[ crop || cross ]
*	Повторять ноль или больше раз.	[,]*
+	Повторять один или больше раз.	+
?	Указанный тип, слово или группа не является обязательным.	inset?
	Повторять не менее A, но не более B раз.
#	Повторять один или больше раз через запятую.	#

Значения

В качестве значений принимаются любые единицы длины, принятые в CSS — например, пиксели (px), дюймы (in), пункты (pt) и др. При использовании процентной записи высота вычисляется в зависимости от значения height у родительского элемента. Если родитель явно не указан, то в его качестве выступает окно браузера. Если высота у родителя явно не определена, то применяется значение auto , оно устанавливает высоту исходя из содержимого элемента.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

Пример

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства height

Объектная модель

Примечание

Браузер Internet Explorer до версии 7 некорректно определяет height как min-height.

Браузер Internet Explorer 8 неверно отображает элемент при добавлении overflow со значениями auto и scroll .

В режиме совместимости (quirk mode) Internet Explorer до версии 7 включительно неправильно вычисляет высоту элемента, не добавляя к ней значения padding и border .

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft ( Черновик спецификации ) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

• — элемент полностью поддерживается браузером;
• — элемент браузером не воспринимается и игнорируется;
• — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

Число указывает версию браузреа, начиная с которой элемент поддерживается.

См. также

• box-sizing
• width
• Абсолютное позиционирование
• Блочные элементы
• Вкладки на CSS
• Высота и ширина в CSS
• Открываем блочную модель
• Поток
• Примеры использования float
• Размеры блока
• Создание флексбоксов
• Строчно-блочные элементы
• Строчные элементы

Источник

CSS height Property

The height property is used to set an element’s height. This property does not include padding, borders, or margins. The height property can be specified by «px», «cm», «vh» or by percentages. The default value is «auto».

If the min-height and max-height properties are used, it will override the height property.

If height is set to one of the numeric values like (r)em, px or %, and if if the content doesn’t fit inside of the particular height, this will cause overflowing. The CSS overflow property specifies, how the container will deal with the overflowing.

Initial Value	auto
Applies to	all elements
Inherited	No.
Animatable	Yes. Height is animatable.
Version	CSS1
DOM Syntax	object.style.height = «400px»;

Syntax

height: auto | length | initial | inherit;

Example of the height property:

html> html> head> title>The title of the document title> style> div < height: 60px; background-color: #1c87c9; color: #eee; > p < height: 30px; background-color: #8ebf42; color: #eee; > style> head> body> h2>Height property example h2> div>The height of this div element is set to "60px". div> p>The height of this paragraph is set to "30px". p> body> html>

Result

Example of the height property with the HTML tag:

html> html> head> title>The title of the document title> style> body < background-color: #ccc; > .height-normal < height: auto; > .height-big < height: 100px; > style> head> body> h2>Height property example h2> p>Here the height is set to "auto" p> img class="height-normal" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> br> hr> p>The height for this image is defined as "100px". p> img class="height-big" src="/uploads/media/default/0001/01/003e5c463668d174ab70bea245c192d81901a4a6.png"> body> html>

Example of the height property with the «length» value:

html> html> head> title>The title of the document title> style> .container < height: 50vh; border: 2px solid #1c87c9; padding: 5px; > style> head> body> h2>Height property example h2> div class="container"> p>Here the height is specified as "50vh". p> div> body> html>

Example of the height property with all the values:

html> html> head> title>The title of the document title> style> .red-container < height: 30vh; border: 2px solid #f45e30; color: #f45e30; > .blue-container < height: 40%; width: 30%; border: 2px solid #1c87c9; color: #1c87c9; margin-top: 20px; > .orange-container < height: 100px; border: 2px solid #f9fc35; color: #f9fc35; margin-top: 20px; > .green-container < height: auto; border: 2px solid #8ebf42; color: #8ebf42; margin-top: 20px; > style> head> body> h2>Height property example h2> div class="red-container"> Height 30vh div class="blue-container"> Height 40% div> div> div class="orange-container"> Height 100px; div> div class="green-container"> Height (auto) div> body> html>

Values

Value	Description	Play it
auto	When we use this value, the browser calculates the original height of the image or box. This is the default value of this property.	Play it »
length	Defines the height with px, cm etc.	Play it »
%	Defines the height with percent.
initial	Makes the property use its default value.	Play it »
inherit	Inherits the property from its parent element.

Browser support

Practice Your Knowledge

Which of the following CSS properties override the height property?

Related Resources

• CSS border Property
• CSS width Property
• CSS margin Property
• How to Vertically Center Text with CSS
• How to Blur the Background Image in CSS
• How to Add Border to Image in CSS
• How to Style Comment Box Using CSS
• How to Style a Horizontal Line
• How to Add a Frame Around an Image
• How to Make Images Responsive with CSS
• How to Disable the Resizing of the Element?
• How to Style a Box Drop-Down with Only CSS?
• How to Set the Checkbox Size with HTML and CSS
• How to Resize Images Proportionally for Responsive Web Design With CSS
• How to Add Multiple Background Images with CSS
• How to Center the Content Vertically and Horizontally Using Flexbox
• How to Add a Blur Filter to the Background Image
• How to Create a Modal Dialog Box with CSS and JavaScript
• How to create a drop-down navigation menu with CSS
• How to Add Advanced Hover Effects to an Image with Pure CSS
• How to Create an Overlay Using CSS
• How to Hide Scrollbars with CSS
• How to Style a Checkbox with CSS
• How to Maintain the Aspect Ratio with CSS
• How to Align Inline-Block Elements to the Top of Container
• How to Create a Parallax Scrolling Effect
• How to Change the Background Image on Scroll Using CSS
• How to Create Loading Spinner With CSS
• How to Create a Fixed Navbar with CSS
• How to Set the Size of the Background-image
• How to Align Divs Side by Side
• How to Align the Content of a Div Element to the Bottom
• How to Make a Div Vertically Scrollable
• How to Auto-Resize the Image to fit an HTML Container
• How to Make an HTML Element not Larger Than its Content
• How to Give a Div Element 100% Height of the Browser Window
• How to Create Animated Menu Box With Icons
• How to Center an Image Between the Containers
• How to Create a Fullscreen Image Slider with Pure CSS
• How to Add a Glass Background Effect to the Text
• How to Create a Responsive Iframe with CSS
• How to Vertically Align Elements in a Div
• How to Align a Checkbox and Its Label Consistently Cross-Browsers
• How to Set Space Between Flexbox Items
• How to Add Lines Before and After the Heading Text
• How to Vertically Center a
• How to Cut Corners With Pure CSS
• How to Scale the Content of Element
• How to Create Sticky Footer with CSS
• How to Add a Circle Around a Number in CSS
• How to Crop and Center Images Automatically in CSS
• How to Set the Equivalent of «src» Attribute of an Tag in CSS
• How to Add Both a Background Image and CSS3 Gradient to the Same Element
• How to Center a Button Both Horizontally and Vertically within a Div
• How to Create Circles with CSS
• How to Change the Input and Button Images with CSS
• How to Limit Border Length with CSS
• How to Clear the Canvas for Redrawing
• How to Overlay Images with CSS
• How to Turn a Rectangular Image into a Cropped Square Image with CSS
• How to Make the Div Height to Auto-Adjust to the Background Size
• How to Make Scrollbar Visible Only when Necessary
• How to Remove Background Image in CSS
• How to Center the Text in the HTML Table Row
• How to Apply Multiple Transforms in CSS
• How to Set a Box-Shadow on One Side of the Element
• How to Make a Fill the Height of the Remaining Space
• How to Change the Color of an
  

  ---

  Element

• How to Overlay One Div Over Another
• How to Center a on the Screen Using jQuery
• How to Make a Div Fill the Remaining Width
• How to Add Border Inside a Div
• How to Get Image Size Using JavaScript
• How to Apply CSS Style to the Element Name
• How to Set an Equivalent of the «cover» Value of the background-size Property for an Tag
• How to Create a Two-Column Div Layout with the Right Column Having Fixed Width
• How to Create a Table with a Fixed Header and Scrollable Body
• How to Rotate the Element by 90 Degrees
• How to Set the Size of the Element
• How to Vertically Align a Text Within a Tag to the Center
• How to Add a Text on the HTML5 Element
• How to Vertically Center Inline (Inline-Block) Elements
• How to Vertically Align an Image Within a Div With Responsive Height
• How to Place a Div in the Middle of the Screen when It is Smaller than the Page
• How to Horizontally Center Contents Within a Div
• How to Make Rounded Corners Hide the Overflow in Opera/Chrome
• How to Make a Fixed Page Header Not Overlap In-Page Anchors
• How To Make a Element Extend to the Page Bottom Even Having No Content
• How to Relatively Position an Element without It Taking Space in the Document Flow
• How to Create an Animation with a Delay in CSS
• What is the Difference Between the «inline» and «inline-block» Values of the CSS display Property

Источник