From 3b948afeb1a4d48fb8b6368a01636024e6eda887 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?M=C2=A1ke?= <77801554+front42@users.noreply.github.com>
Date: Fri, 1 May 2026 20:37:40 +0300
Subject: [PATCH] feat: edit height-percent article.md ru
---
20-css-for-js/14-height-percent/article.md | 24 +++++++++++-----------
1 file changed, 12 insertions(+), 12 deletions(-)
diff --git a/20-css-for-js/14-height-percent/article.md b/20-css-for-js/14-height-percent/article.md
index ce9656bfb6..b8ed9511c2 100755
--- a/20-css-for-js/14-height-percent/article.md
+++ b/20-css-for-js/14-height-percent/article.md
@@ -16,7 +16,7 @@
Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.
-То есть, HTML-код требуется такой:
+То есть HTML-код требуется такой:
```html
@@ -33,11 +33,11 @@
Придумали?... Если да -- продолжаем.
-Есть разные варианты, но, возможно, вы решили сдвинуть `.toggler` влево, при помощи `float:left` (тем более что он фиксированной ширины) и увеличить до `height: 100%`, чтобы он занял всё пространство по вертикали.
+Есть разные варианты, но, возможно, вы решили сдвинуть `.toggler` влево, при помощи `float: left` (тем более что он фиксированной ширины) и увеличить до `height: 100%`, чтобы он занял всё пространство по вертикали.
**Вы ещё не видите подвох? Смотрим внимательно, что будет происходить с `height: 100%`...**
-## Демо height:100% + float:left
+## Демо height: 100% + float: left
CSS:
@@ -71,11 +71,11 @@ CSS:
Ответ нам даст спецификация CSS 2.1 [пункт 10.5](https://www.w3.org/TR/CSS2/visudet.html#propdef-height).
-**"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на `height:auto`. Кроме случая, когда у элемента стоит `position:absolute`."**
+**"Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на `height: auto`. Кроме случая, когда у элемента стоит `position: absolute`."**
-В нашем случае высота `.container` как раз определяется по содержимому, поэтому для `.toggler` проценты не действуют, а размер вычисляется как при `height:auto`.
+В нашем случае высота `.container` как раз определяется по содержимому, поэтому для `.toggler` проценты не действуют, а размер вычисляется как при `height: auto`.
-Какая же она -- эта автоматическая высота? Вспоминаем, что обычно размеры `float` определяются по содержимому ([10.3.5](https://www.w3.org/TR/CSS2/visudet.html#float-width)). А содержимого-то в `.toggler` нет, так что высота нулевая. Поэтому этот блок и не виден.
+Какая же она -- эта автоматическая высота? Вспоминаем, что обычно размеры `float` определяются по содержимому ([10.3.5](https://www.w3.org/TR/CSS2/visudet.html#float-width)). А содержимого-то в `.toggler` нет, так что высота нулевая. Поэтому блок и не виден.
Если бы мы точно знали высоту внешнего блока и добавили её в CSS -- это решило бы проблему.
@@ -96,9 +96,9 @@ CSS:
Поэтому решим задачу по-другому.
-## Правильно: height:100% + position:absolute
+## Правильно: height: 100% + position: absolute
-Проценты будут работать, если поставить `.toggler` свойство `position: absolute` и спозиционировать его в левом-верхнем углу `.container` (у которого сделать `position:relative`):
+Проценты будут работать, если установить для `.toggler` свойство `position: absolute` и спозиционировать его в левом-верхнем углу `.container`, которому задать `position: relative`:
```css
.container {
@@ -130,9 +130,9 @@ CSS:
[iframe src="height-percent" height=160 link edit]
-## Проблема с height: 100%, проявляющаяся, когда у родительского элемента не установлен height, но указан min-height
+## Проблема с height: 100%, проявляющаяся, когда у родительского элемента не установлено свойство height, но указано min-height
-Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту указанную в min-height.
+Вам необходимо установить height: 1px для родителя, чтобы дочерний элемент смог занять всю высоту, указанную в min-height.
```css
.parent {
min-height: 300px;
@@ -147,6 +147,6 @@ CSS:
## Итого
- Свойство `height`, указанное в %, работает только если для внешнего блока указана высота.
-- Стандарт CSS 2.1 предоставляет обход этой проблемы, отдельно указывая, что проценты работают при `position:absolute`. На практике это часто выручает.
-- Если у родительского элемента не установлено height, а указано min-height, то, чтобы дочерний блок занял 100% высоты, нужно родителю поставить свойство height: 1px;
+- Стандарт CSS 2.1 предоставляет обход этой проблемы, отдельно указывая, что проценты работают при `position: absolute`. На практике это часто выручает.
+- Если у родительского элемента не установлено height, а указано min-height, то, чтобы дочерний блок занял 100% высоты, нужно задать родителю height: 1px;