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;