Skip to content

feat: edit height-percent article.md ru #2160

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
front42 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

feat: edit height-percent article.md ru #2160

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions 20-css-for-js/14-height-percent/article.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@

Это удобно для интеграции с JavaScript, чтобы отлавливать на нём клики мыши.

То есть, HTML-код требуется такой:
То есть HTML-код требуется такой:

```html
<div class="container">
Expand All @@ -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:

Expand Down Expand Up @@ -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 -- это решило бы проблему.

Expand All @@ -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 {
Expand Down Expand Up @@ -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;
Expand All @@ -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;