Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > Высота div по содержимому

Автор: CHEM_Eugene 14.7.2008, 10:54

Код


<div style="background-color:lime;">
     текст
     <div style="width:100px;height:60px;">содержимое</div>
     <div style="width:100px;height:60px;">содержимое</div>
</div>

ОЧЕНЬ НАДО сделать так, чтобы высота div-родителя зависела от высоты его потомков, т.е. зависела от высоты содержимого.
Сейчас получается так - узенькая полоска с фоном (lime), а ниже ее два DIVa.

Автор: bars80080 14.7.2008, 11:09

сдаётся мне, что у тебя давят какие-то дополнительные стили, т.к. по-умолчанию, родительский див растягивается так, чтобы все дети влезали в него (за исключением тех, что вырваны из общего потока position, float и т.п.)

Автор: CHEM_Eugene 14.7.2008, 11:25

Цитата(bars80080 @ 14.7.2008, 11:09)

А какие? У меня из общих только:

Код


* {
margin:0;
padding:0;
}

В принципе мне помогает вариант, если у родителя сделать display:table, но что-то мне не нравится...

Автор: bars80080 14.7.2008, 11:40

скажи мне, как ты видишь эту страницу?
http://interes.uzelok.net/files/isp/div5.php

Автор: CHEM_Eugene 14.7.2008, 13:23

Цитата(bars80080 @ 14.7.2008, 11:40)

скажи мне, как ты видишь эту страницу?
http://interes.uzelok.net/files/isp/div5.php

нормально вижу, как и должно быть.
Нашел вот: У внутренних DIVов float:left задан, если убрать - то родительский увеличивается, но мне нужно внутренние DIV в строчку построить!

Автор: bars80080 14.7.2008, 13:41

в строчку - тогда лучше вместо div, использовать span
а если уж див, то задать display: inline;

Автор: CHEM_Eugene 14.7.2008, 13:46

Цитата(bars80080 @ 14.7.2008, 13:41)

в строчку - тогда лучше вместо div, использовать span
а если уж див, то задать display: inline;

и тот и другой вариант полностью разваливают верстку, т.к. в этих внутренних DIV-ах ещё по 2 DIV, а в них по таблице...

Автор: bars80080 14.7.2008, 14:22

а как же span тогда развалил? он ведь физически не может повлиять на внутренние дивы.
только если на нём завязаны (как на элементе span) классы стилей

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

Автор: SelenIT 15.7.2008, 18:28

Цитата(bars80080 @ 14.7.2008, 13:41

)

в строчку - тогда лучше вместо div, использовать span
а если уж див, то задать display: inline;

Подозреваю, что не до такой степени в строчку smile

. Скорее в подобие строки таблицы...

Цитата(CHEM_Eugene @ 14.7.2008, 10:54

)

ОЧЕНЬ НАДО сделать так, чтобы высота div-родителя зависела от высоты его потомков

Одно из наиболее универсальных "волшебных" способов заставить контейнер считаться с размерами плавающих детей - задать ему overflow:hidden. Есть и другие способы, use google smile

Автор: Su_ 3.4.2012, 16:55

overflow:hidden работает. Спасибо, и всем доброго дня.

А это кроссбраузерное решение ( ie6>) ?

Автор: SelenIT 3.4.2012, 19:38

Для IE6 надо еще включить Layout. Если блоку задан какой-либо размер, то ничего дополнительно делать не надо, если же нет, то самое простое и безобидное — zoom: 1 (лучше в отдельных стилях только для IE).

Автор: gaserge 18.4.2012, 08:29

min-height: 60px;
height: auto

Автор: Aliance 18.4.2012, 08:57

SelenIT, и снова возвращаясь к теме нашего недавнего обсуждения...
Мне вот почему-то вариант с overflow не нравится и я стараюсь в таких случаях родителю прописывать небезызвестный класс clearfix. Есть какие-то комментарии по этому поводу?