Div по высоте родителя

Div по высоте родителя

2. <table> или display: table

Простой и чрезвычайно совместимый способ сделать это — использовать table — , я бы порекомендовал вам попробовать это, если вам нужна поддержка старого IE.. Вы имеете дело со столбцами; divs + floats просто не лучший способ сделать это (не говоря уже о том, что несколько уровней вложенных div только для взлома ограничений css вряд ли более «семантичны», чем просто использование простой таблицы). Если вы не хотите использовать элемент table, рассмотрите css display: table (неподдерживаемый IE7 и старше).

Пример: http://jsfiddle.net/emn13/7FFp3/

Релевантный html: (но рассмотрите вместо этого использование простого <table>)

<div class=»parent»><div>column 1</div><div>column 2</div></div>

Соответствующий css:

.parent { display: table; } .parent > div {display: table-cell; width:50%; } /*omit width:50% for auto-scaled column widths*/

Этот подход гораздо более надежный, чем использование overflow:hidden с поплавками. Вы можете добавить почти любое количество столбцов; вы можете их автоматически масштабировать, если хотите; и вы сохраняете совместимость с древними браузерами. В отличие от решения с плавающей точкой, вам также не нужно заранее знать, какой столбец наиболее длинный; высота шкалы очень хорошая.

KISS: не используйте поплавковые хаки, если вам это не нужно. Если IE7 является проблемой, я бы все равно выбрал бы обычную таблицу с семантическими столбцами по сравнению с жестким, менее гибким решением для трюков-CSS в любой день.

Кстати, если вам нужно, чтобы ваш макет был отзывчивым (например, без столбцов на небольших мобильных телефонах), вы можете использовать запрос @media, чтобы вернуться к макету блочного макета для небольших экранов — это работает независимо от того, используете ли вы <table> или любой другой элемент display: table.

3. display:inline block с отрицательным маржером.

Другой вариант — использовать display:inline block.

Пример: http://jsbin.com/ovuqes/2/edit

Соответствующий html: (отсутствие пробелов между тегами div значимо!)

<div class=»parent»><div><div>column 1</div></div><div><div>column 2</div></div></div>

Соответствующий css:

.parent { position: relative; width: 100%; white-space: nowrap; overflow: hidden; } .parent>div { display:inline-block; width:50%; white-space:normal; vertical-align:top; } .parent>div>div { padding-bottom: 32768px; margin-bottom: -32768px; }

Это немного сложно, а отрицательная маржа означает, что «истинное» дно столбцов затенено. Это, в свою очередь, означает, что вы не можете позиционировать что-либо относительно нижней части этих столбцов, потому что это отключено на overflow: hidden. Обратите внимание, что в дополнение к встроенным блокам вы можете добиться аналогичного эффекта с помощью float.

TL; DR: используйте flexbox, если вы можете игнорировать IE9 и старше; в противном случае попробуйте таблицу (css). Если ни один из этих параметров не работает для вас, есть негативные маркеры, но это может вызвать странные проблемы с отображением, которые легко пропустить во время разработки, и есть ограничения макета, о которых вам нужно знать.

FAQ по div’ам

О преимуществах div’ной верстки перед табличной — никому наверное рассказывать не надо. Все это уже давно поняли и перешли на них с таблиц. Ну а те кто не перешел — вскоре поймут свои ошибки и это сделают. Но как и в любом занятии — тут также есть свои подводные камни. То дивы ведут себя не так как надо, то не получается сверстать какую нибудь определенную структуру, преград много, а верстальщик всегда один…
Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!

Об этом стоит всегда помнить

Существует один подход в верстке, которого нужно придерживаться как можно чаще и вернее. Это минерализация дерева DOM. Имеет это несколько вполне обоснованных преимуществ: упрощает сам процесс верстки, сводит количество потенциальных ошибок к минимуму, улучшает прозрачность кода. Об этом надо помнить всегда, и в моменте планирования структуры обращать на это особо много внимания.

Основные принципы таковы: для отступов используем только padding и margin (в зависимости от потребности) — делать отдельный 20 пиксельный div вовсе не обязательно, ограничиваем вложенность до минимума, не переусердствуем с position:relative и последующими смещениями блока (при неправильном использовании может привести к получасовой правке целого кода), активно пользуемся z-index для достижения нужного эффекта.

FAQ

— Как выставлять div’ы друг за другом? А для этого используется свойство — float: left (или right, в зависимости от потребности), чтобы следующий div после таких поочередных стоял под ними, задаем ему свойство clear (например clear:left).
— Как выровнять div по центру? Одно из решений выглядит следующим способом — задаем margin-left и margin-right как auto (или еще проще — margin:0 auto;)
— Как позиционировать элементы находящиеся в div по вертикали? Зависит от элемента, например для текста хватит всего лишь указания vertical-align:middle, а для картинки нужно прописать line-height:Npx.
— Делать отступы при помощи margin или padding? В основном — margin служит для отступов между блоками, это отступ «наружу», так как padding — отступ «внутрь» и чаще всего применяется для организации отступа вокруг текста к примеру. Вроде бы простая вещь, а иногда файрбагом можно такие перлы встретить, что я не мог тут об этом не упомянуть.
— Смещать блок при помощи margin или position:relative в связке со смещениями по горизонтали и вертикали? Конечно же в данных случаях надо использовать margin. Правда как и везде — все зависит от конкретного случая, но в основном следует пользоваться все таки margin.
— Как растянуть div по содержимому блока? Для этого надо прописать height: auto;
— Как растянуть div по высоте родителя, который в свою очередь растягивается по высоте содержимого div’a находящегося внутри него, рядом с первым div’ом? Div’у с контентом задаем height: auto, двум остальным дивам height: 100% и display: table;
— Как сделать div невидимым? При помощи манипуляций свойством display. Для невидимости выставляем его на none.
— Как сделать прокрутку контента в div со статической высотой? Прописываем в свойствах overflow:scroll.
— Как отобразить (к примеру) тэг «a» как div (блок)? В свойствах задать высоту и ширину и выставить display:block;
Вот и все, что нужно знать чтобы безболезненно верстать на div’ах. На самом деле. Ну если всплывут еще какие нибудь вопросы, тогда тут сразу же появятся и ответы! А вообще-то тут нечего боятся — пол часа тренировок и вы уже профи! Так что отставляйте эти устаревшие table — и переходите на новую ступень эволюции!


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *