Есть некие блоки обернутые в контейнер. Имеют свойство float: left . Нужно, чтобы они были высотой с контейнер (height: 100% - не работает). Clearfix задан. Высота контейнера не задана(по самому высокому блоку внутри выставляется автоматически). Не используя flex и table
3 ответа
Свойство height, указанное в %, работает только если у родительского блока указана высота, либо если элементы абсолютно позиционированы.
Используйте flex. Он умеет делать все тоже самое что и флоат( в большинстве случаев) и даже больше. Да и проблем с ним меньше. Поддержка хорошая, дерзайте. Второй(более старый вариант) можно попробовать использовать display: table, table-row, table-cell... Но первый вариант лучше.
-
Я знаю про flexbox. Просто он не везде поддерживается. А табличный устарел. Если есть другой способ, подскажите. – Letton 14 янв '18 в 14:05
-
@Letton, например? caniuse.com/#search=flex, мне кажется это хороший показатель – Node_pro 14 янв '18 в 14:07
-
-
-
Node_pro, у IE 9 и ниже будут проблемы с flex. Но специально для них можно сделать это таблицой. Ещё раз спасибо! – Letton 14 янв '18 в 16:34
Что вам мешало использовать height: inherit;
?
main {
height: 100px;
}
div {
float: left;
width: 100px;
margin-right: 10px;
height: inherit;
background: #eee;
}
<main>
<div></div>
<div></div>
<div></div>
</main>
-
-
@Letton о том, что высота контейнера не задана вроде как позже появилось. А про разную высоту блока не уточняется. Случаи бывают разные. При динамически обновляемом контенте вам нужен либо JS, либо все же flexbox, поддержка которого уже добралась к 97%. Поддерживая старые браузеры, вы сами тормозите внедрения новшеств, облегчающих вам жизнь. – Alexey Giryayev 16 янв '18 в 22:35
float: left
и высота контейнера? – Air 14 янв '18 в 13:56