CSS DIV не расширяется при добавлении текста

Question

У меня быстрый вопрос по CSS, я надеюсь, что кто-нибудь может мне помочь!

У меня есть DIV с именем #ContentPanel, и я хочу, чтобы он мог расширяться, чтобы он мог обслуживать больше текста, если это необходимо. В настоящее время, если текст длиннее 500 пикселей (как указано в CSS), он выходит из нижней части и поверх содержимого в div ниже. Как я могу настроить его на автоматическое расширение и толкать все деления после вниз.

Если у кого-нибудь есть идеи, пожалуйста, дайте мне знать

Вот HTML

<div id="MainContent">
    <div id="MainImage"></div>
    <div id="ContentPanel">Text content goes here.</div>
</div>

... а вот и CSS

#MainContent {
    position:relative;
    height:500px;
    width:800px;
    margin:0 auto;
    background-color: #000;
}

#MainImage {
    position:absolute;
    top:0;
    left:0;
    width:350px;
    height:500px;
    background-color:#000;
}

#ContentPanel {
    position:absolute;
    height:500px;
    top:0;
    left:350px;
    width:450px;
    background-color:#000;
}

Заранее спасибо!

С уважением,

Decbrad

Answer 1

Используйте min-height вместо height.

За исключением IE 6: в нем есть ошибка, поэтому он интерпретирует height как min-height.

Answer 2

Как уже упоминалось, проблема в том, что вы определяете фиксированную высоту .. и поэтому браузер придерживается ее ..

Вам нужно сделать его более гибким, используя свойство min-height. Однако IE не поддерживает его, но из-за другой ошибки в том, как он обрабатывает высоту (которую он расширяет, чтобы обслужить контент, если он превышает заданную высоту), это можно обойти.

Полное решение

height:auto!important; /*this set the height to auto for those supporting it (not IE)*/
height:500px; /*for IE, all others override it by the previous rule*/
min-height:500px; /*for the ones that support it (all but IE)*/

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

Answer 3

Попробуйте установить минимальную высоту (min-height :), а не конкретную фиксированную высоту.

Answer 4

Личное мнение: чтобы обойти проблемы IE6 с минимальной высотой, действительно лучше использовать специфический для IE6 условный комментарий при нацеливании на него, а не добавлять хаки в ваш CSS.

Это если для вас важен совместимый со стандартами CSS, хотя в наши дни это становится все более и более трудным благодаря поддержке браузеров.

<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->

Answer 5

В качестве второго варианта вы можете попробовать overflow: scroll; или overflow-x и overflow-y, чтобы полоса прокрутки отображалась на div в случае, если содержимое не подходит.

Answer 6

Свойство, которое вы ищете, имеет минимальную высоту, а не высоту.

http://www.w3schools.com/CSS/pr_dim_min-height.asp

Это означает, что ваш элемент будет, по крайней мере, таким высоким. Если содержание этого требует, высота будет превышать указанное значение.

Answer 7

вам нужно использовать min-height атрибут css