Как задать блоку div высоту 100% после задачи float: left?

Question

[Владислав Софиенко]

Почему блоку не задаётся height: 100%, после того как ему прописывается float: left?

Как задать? Высота родительского блока не должна быть фиксированной, так как она должна быть равняться в зависимости от контента в ней.

codepen.io/anon/pen/NpQqdv

Comments

[konstantinov91]

Вы имеете ввиду выпадает из потока? Есть clearfix для этого. clearfix:after{ content:''; display: table; clear:both; } И назначаете родительскому блоку класс clearfix

Answer 1

[ivan1kazantsev]

codepen.io/anon/pen/NpQqdv

Теперь понятно, о чем ты...Высота в процентах не считается, если высота родителя зависит от контента (кроме абсолютного позиционирования).

В твоем случае можно сделать так:

.main {
  position: relative;
}
.block-1 {
  position: absolute;
  width: 200px;
  height: 100%;
  top: 0;
  left: 0;
}
.block-2 {
  padding-left: 200px;
}

Answer 2

[Андрей Токмаков]

А может быть дело не в флоат??? А просто у родительского блока нет высоты и 100% не понятно от чего брать
codepen.io/anon/pen/KWOpdy

Comments

[Владислав Софиенко]

а если высота должна у блока должна быть равна в зависимости от контента в ней?

[Андрей Токмаков]

Владислав Софиенко: не логично, в вопросе Вы говорите надо высоту 100%, а сейчас говорите в зависимости от контента

[Владислав Софиенко]

Андрей Токмаков: родительский зависит от контента, а див который находится в родителе со float'ом ровняется 100% родительского

[Владислав Софиенко]

Андрей Токмаков: codepen.io/anon/pen/NpQqdv

[Андрей Токмаков]

Владислав Софиенко: Делайте родительскому блоку position: relative; а вложенному position: absolute; и будет Вам счастье