Особенности свойства height в процентах

Реклама

В чем же особенности свойства height в процентах ?

Из практики свойство height, если указать его в процентах, покажет высоту относительно родительского блока.

Но на самом деле не все так красиво и просто. Естественно для произвольного div элемента height в процентом соотношении работать не будет!
Сейчас наша цель – получить вёрстку такого вида:

При этом блок в которой находиться левая стрелка должен быть отдельным элементом внутри контейнера.



Данный способ удобен для дальнейшей работы с JS, чтобы принимать на нём клики мыши.
То есть, HTML-код требуется примерно такой:

<div class="container">
  <div class="arrow">
    <!-- стрелка влево при помощи CSS, ширина фиксирована -->
  </div>
  <div class="content">
    ...Текст...
  </div>
</div>

Как же это реализовать?

Есть много разных вариантов, но, вероятнее всего, вы решились сдвинуть .arrow влево, при помощи функции float:left (учитывая то что он фиксированной ширины) и увеличить высоту до 100%, чтобы он занимал всё свободное пространство по вертикали.



Но и тут есть свой подвох. Смотрим то, что будет происходить с высотой 100%…

height:100% + float:left

CSS:

.container {
  border: 1px solid black;
}

.content {
  /* margin-left нужен, так как слева от содержимого будет стрелка */
  margin-left: 35px;
}

.arrow {
  /* Зададим размеры блока со стрелкой */
  height: 100%;
  width: 30px;
  float: left;

  background: #EEE url("arrow_left.png") center center no-repeat;
  border-right: #AAA 1px solid;
  cursor: pointer;
}

А теперь в действии:

Как видно из примера, стрелка вообще исчез из поля видимости! Куда же она подевалась?



Ответ кроется в стандартах CSS 2.1 пункт 10.5.

«Если высота внешнего блока вычисляется по содержимому, то высота в % не работает, и заменяется на height:auto;.Кроме случая, когда у элемента стоит position:absolute.»

В нашем случае высота .container как раз определяется по содержимому, поэтому для .arrow процентное соотношение не действительно, а размеры устанавливаются как при height:auto.

Если бы мы знали однозначную высоту родительского элемента и вписали её в CSS – это решило бы нашу проблему.

Например:

/*+ no-beautify */
.container {
  height: 200px; /* теперь height в % внутри будет работать */
}

Результат:

…Но высоту в нашем случае угадать не получиться..

Поэтому данную задачу можно решить другим путем.

Правильно: height:100% + position:absolute

Проценты сработают, если поставить .arrow свойство position:absolute и спозиционировать его в левом-верхнем углу. container (для контейнера изначально установить позицию relative):

.container {
  position: relative;
  border: 1px solid black;
}

.content {
  margin-left: 35px;
}

.arrow {
  position: absolute;
  left: 0;
  top: 0;

  height: 100%;
  width: 30px;
  cursor: pointer;

  border-right: #AAA 1px solid;
  background: #EEE url("arrow_left.png") center center no-repeat;
}

Результат:

Проблема с высотой в 100%, появляющиеся, когда у родительский элемент не имеет высоты, но указана минимальная min-height

Вам требуется установить высоту равную в 1px для внешнего элемента, чтобы внутренний элемент смог занять всю высоту указанную в min-height.

.parent {
    min-height: 300px;
    height: 1px; /* Требуется, чтобы дочерний блок взял высоту 100% */
}

.child {
    height: 100%;
}

Данная статья является копирайтом статьи https://learn.javascript.ru

Реклама