Не растягивается блок

[Digidie]

Доброго времени суток! Есть такая проблема. Нужно сделать так чтобы блок тянулся в зависимости от контента.

Пример:

<div id="main">

<div id="content">привет привет привет привет привет привет привет привет привет привет привет </div>

</div>

CSS:

#main{

width: 70px;

height: 100%;

}

#content{

width: 50px;

height: 100%;

}

Результат: Ввожу в контент 11 "приветов" а в браузере появляется только 9. Подскажите пожалуйста как быть. Буду очень благодарен!

P.S. overflow: hidden - не помогает.

[NeoXidizer]

google chrome, jsfiddle.net, все работает - вижу 11 "приветов"

[Digidie]

В опере и в IE не работает. Что делать?

[Mihail]

div и так тянется по умолчанию от наполнения, вы же сразу ему задаете 100% высоту, если нужна 100% высота блока то добавте в начале css файла:

html, body {
    height:100%;
}

а селектору #content добавте min-height:100%

[Digidie]

div и так тянется по умолчанию от наполнения, вы же сразу ему задаете 100% высоту, если нужна 100% высота блока то добавте в начале css файла:

html, body {
    height:100%;
}

а селектору #content добавте min-height:100%

У меня в контенте будет background(изображение), нужно чтобы контент тянулся независимо от текста. Ваш вариант работает только в Хроме, в Опере и Осле он не работает. Сейчас как то так:

html

<div id="wrapper">

<div id="main">

<div id="top_main">тут будет изображение с закругленными углами(верх)</div>

<div id="content">Тут будет background(изображение), а поверх будет текст, но изображению я немогу задать фиксированную высоту так как текст будет выходить за пределы</div>

<div id="bottom_main">тут будет изображение с закругленными углами(низ)</div>

</div>

</div>

CSS

#wrapper{

width: 1100px;

margin: 0 auto;

}

#main{

margin: 27px 0 0 80px;

min-height: 100%;

}

#top_main{

width: 944px;

height: 33px;

background: url(../images/top_content_description.jpg) no-repeat top;

}

#content{

width: 944px;

min-height: 100%;

background: #cccccc url(../images/content_bg.png) no-repeat 259px 57px;

overflow: hidden;

clear: both;

}

#bottom_main{

width: 944px;

height: 9px;

background: url(../images/bottom_main.jpg) no-repeat bottom;

}

Что можно сделать в этом случае?

[Mihail]

Насколько я вас понял вам нужно что-бы блок content растягивался на 100% области просмотра по высоте, и продолжал тянуться от наполнения

html, body {
	height: 100%;
}

#wrapper {
	width: 800px;
	margin: 0 auto;
	height: 100%;
}

#main {
	margin: 27px 0 0 80px;
	height: 100%;
}

#top_main {
	width: 744px;
	height: 33px;
	background: url(../images/top_content_description.jpg) no-repeat top;
}

#content {
	width: 744px;
	min-height:100%;
	background: #cccccc url(../images/content_bg.png) no-repeat 259px 57px;
}

#bottom_main {
	width: 744px;
	height: 9px;
	background: url(../images/bottom_main.jpg) no-repeat bottom;
}

[Digidie]

а вот если после content'a идут ещё блоки то контент за них вылазеет)