Как растянуть div по высоте div'а внутри?

Question

[Ayk72]

Здравствуйте!

Как растянуть блок div по высоте div'a внутри него?

<div class="lin1">
<div class="lin2">
Текст, который не выходит за пределы lin2. Растягивает его по ширине и высоте, переносит строки.
</div></div>

<style>
.lin1 {
position: relative;
height: auto;
width: 180px;
background: url(...) no-repeat;
}
.lin2 {
width: 150px;
position: absolute;
height: 100%;
display: table;
white-space: normal;
}
</style>

Получается что lin1 всегда высотой 1px...
При этом у lin1 есть фоновое изображение, а lin2 налаживается на него.

Answer 1

[Pretor DH]

<div class="lin1">
<div class="lin2">
Текст, который не выходит за пределы lin2. 
Растягивает его по ширине и высоте, переносит строки.
</div></div>

<style>
.lin1 {
position: relative;
height: auto;             
/* формируется из высот содержимого родного потока - у которого дальше содержимого нет */
width: 180px;
background: url(...) no-repeat;
}
.lin2 {
width: 150px;
/* position: absolute;        /*   выделяется в новый поток непривязаный к родителю.     */  
position: relative;             
/* РЕШЕНИЕ: Меняем на relative чтобы остаться в потоке родителя */
height: 100%;                 
 /* Растягивает блок по высоте первого родителя у которого position отличное от fixed - себя, потому что родитель потока */
display: table;
white-space: normal;
}
</style>

JSFiddle

Answer 2

[IceJOKER]

Как растянуть div по высоте div'а внутри? - установить родителю div фиксированную высоту.
а если нужна 100% высоту, то устанавливаете 100% высоту для всех родителей вплоть до html

Comments

[Ayk72]

Я не могу задать высоту, т.к. неизвестно, какая высота будет у текста

[IceJOKER]

Ayk72: меня это не волнует, я же вам объяснил как задается 100% высота. если даже не 100% высота нужна, принцип работы я тоже объяснил.
высота элемента зависит от высоты родителей

[Yuriy]

IceJOKER: нафига ставить 100% html и body, если блоки могут быть вообще в контенте?

Answer 3

[Александр Кузнецов]

Главное - чтобы у родительского контейнера был position: relative;
Тогда его дети будут видеть, какая у него высота.