div не растягивается по содержимому

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

Данный пост предназначен скорее для начинающих, но вдруг и профи найдут тут что-то интересненькое. Так что давайте приступим уже к делу!

Содержание

Об этом стоит всегда помнить
1 ответ 1
Всё ещё ищете ответ? Посмотрите другие вопросы с метками css div или задайте свой вопрос.
Похожие
2. Растянуть div на всю высоту страницы.
2. Div не растягивается по содержимому

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

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

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

— Как выставлять 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 — и переходите на новую ступень эволюции!

Данная статья не подлежит комментированию, поскольку её автор ещё не является полноправным участником сообщества. Вы сможете связаться с автором только после того, как он получит приглашение от кого-либо из участников сообщества. До этого момента его username будет скрыт псевдонимом.

Добрый день! Не могу растянуть див по высоте контента внутри него. Вот html и css

1 ответ 1

Добавь min-height и overflow :

Всё ещё ищете ответ? Посмотрите другие вопросы с метками css div или задайте свой вопрос.

2. Растянуть div на всю высоту страницы.

Для этого нужно установить высоту 100% для тегов head и body, а затем задать минимальную высоту тегу div. Минимальную, чтобы он мог растягиваться и дальше, если содержимого больше, чем на экран.

html, body <
height: 100%;
margin: 0;
padding: 0;
>

2. Div не растягивается по содержимому

Если внутри тега div будет просто текст или список или какой-нибудь другой тег со свойствами не выводящими его из потока, то все будет хорошо и div растянется как надо. Но если, например, для верстки в 3 столбца, внутри окажутся элементы div с указанным float:left, то содержащий их div перестанет растягиваться по содержимому. Потому что float выводит элементы из потока.

Первое решение заключается в установке родительскому тегу overflow со значением hidden или auto

Второе решение: добавление после плавающих элементов еще одного div со свойством clear:both

Модифицированный второй способ. Вместо дополнительного блока с clear:both, основной блок делают самочищающимся с помощью псевдоселекторов :after и :before

.clear-fix:before, .clear-fix:after <
content: » «;
display: table;
>
.clear-fix:after <
clear: both;
>
/* Для стареньких IE 6 и 7, если кому-то еще вдруг актуально */
.clear-fix <
*zoom: 1;
>