From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/height/index.html | 175 +++++++++++++++++++++++++++++++++++++ 1 file changed, 175 insertions(+) create mode 100644 files/ru/web/css/height/index.html (limited to 'files/ru/web/css/height') diff --git a/files/ru/web/css/height/index.html b/files/ru/web/css/height/index.html new file mode 100644 index 0000000000..f1c79b7501 --- /dev/null +++ b/files/ru/web/css/height/index.html @@ -0,0 +1,175 @@ +--- +title: height +slug: Web/CSS/height +translation_of: Web/CSS/height +--- +
{{CSSRef}}
+ +

CSS атрибут height позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если {{cssxref("box-sizing")}} имеет значение border-box, то свойство будет определять высоту области рамки.
+
+ {{EmbedInteractiveExample("pages/css/height.html")}}

+ + + +


+ Атрибуты {{cssxref("min-height")}} и {{cssxref("max-height")}} при добавлении меняют значение {{Cssxref("height")}}.

+ +

Синтаксис

+ +
/* Значения-ключевые слова */
+height: auto;
+
+/* <length> значения */
+height: 120px;
+height: 10em;
+
+/* <percentage> значения */
+height: 75%;
+
+/* Глобальные значения */
+height: inherit;
+height: initial;
+height: unset;
+
+ +

Значения

+ +
+
{{cssxref("<length>")}}
+
Высота - фиксированная величина.
+
{{cssxref("<percentage>")}}
+
Высота в процентах - размер относительно высоты родительского блока.
+
border-box {{experimental_inline}}
+
Если присутствует, то предшествующие {{cssxref("<length>")}} или {{cssxref("<percentage>")}} применяются к области рамки элемента.
+
content-box {{experimental_inline}}
+
Если присутствует, то предшествующие {{cssxref("<length>")}} or {{cssxref("<percentage>")}} применяются к внутренней области элемента.
+
auto
+
Браузер рассчитает и выберет высоту для указанного элемента.
+
fill {{experimental_inline}}
+
Использует fill-available размер строки или fill-available размер блока, в зависимости от способа разметки.
+
max-content {{experimental_inline}}
+
Внутренняя максимальная предпочтительная высота.
+
min-content {{experimental_inline}}
+
Внутренняя минимальная предпочтительная высота.
+
available {{experimental_inline}}
+
Высота содержащего блока минус вертикальные margin, border и padding.
+
fit-content {{experimental_inline}}
+
Наибольшее из: +
    +
  • внутренняя минимальная высота
    • +
  • меньшая из внутренней предпочтительной высоты и доступной высоты
    • +
+
+
+ +

Формальный синтаксис

+ +
{{csssyntax}}
+ +

Пример:

+ +

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%;
+}
+ +

 

+ +

Результат

+ +

{{EmbedLiveSample('Example', 'auto', 240)}}

+ +

 

+ +

Проблемы доступности

+ +

Убедитесь, что элементы с height не обрезаются и / или не затеняют другое содержимое, когда страница масштабируется для увеличения размера текста. 

+ + + +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
СпецификацияСтатусКомментарий
{{SpecName('CSS3 Sizing', '#width-height-keywords', 'width')}}{{Spec2('CSS3 Sizing')}}Добавляет ключевые слова max-content, min-content, available, fit-content .
{{SpecName('CSS3 Transitions', '#animatable-css', 'height')}}{{Spec2('CSS3 Transitions')}}Определяет height как анимируемое.
{{SpecName('CSS2.1', 'visudet.html#the-height-property', 'height')}}{{Spec2('CSS2.1')}}Добавляет поддержку значений {{cssxref("<length>")}} и уточняет, к какому элементу применяется.
{{SpecName('CSS1', '#height', 'height')}}{{Spec2('CSS1')}}Первоначальное определение
+ +

{{cssinfo}}

+ +

Поддержка браузерами

+ + + +

{{Compat("css.properties.height")}}

+ +

 

+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf