DIV CSS, не расширяющийся, когда больше текста добавляется
У меня есть быстрый вопрос о CSS, я надеюсь, что кто-то может выручить меня!
У меня есть DIV по имени #ContentPanel, и я хочу, чтобы он смог расшириться так, чтобы он мог обслужить больше текста в случае необходимости. В данный момент, если текст составляет дольше, чем 500 пкс (как указано в CSS), он вытекает из нижней части и по содержанию в отделении ниже. Как я могу установить его до автоматического, разворачивают и продвигают все отделения после вниз.
Если у кого-либо есть какие-либо идеи, сообщите мне
Вот 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
7 ответов
Личное мнение: чтобы обойти проблемы IE6 с min-height, действительно лучше использовать условный комментарий, специфичный для IE6, при нацеливании на него, а не добавлять хаки в ваш CSS.
Это если для вас важно наличие совместимого со стандартами CSS, хотя в наши дни это становится все труднее и труднее из-за неуклюжей поддержки браузеров.
<!--[if IE 6]>
#MainContent, #MainImage, #ContentPanel { height:500px; }
<![endif]-->
Требуемое свойство - это минимальная высота, а не высота.
http://www.w3schools.com/CSS/pr_dim_min-height.asp
Это означает, что ваш элемент будет по крайней мере таким высоким. Если содержание того требует, высота вырастет выше указанного значения.
Используйте min-height вместо height.
За исключением IE 6: В нем есть ошибка, так что он интерпретирует height как min-height.
Как уже упоминалось, проблема в том, что вы определяете фиксированную высоту .. и поэтому браузер ее придерживается ..
Вам нужно сделать ее более гибкой с помощью свойства 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)*/
] Это, в общем, решение таких проблем .. в вашем случае я вижу, что вы используете абсолютное позиционирование .. если вам это действительно нужно, и это не просто попытка решить вашу проблему, то, к сожалению, там элемент не может изменить свой размер для поддержки элементов с абсолютным позиционированием ..
В качестве второго варианта вы можете попробовать overflow: scroll; или overflow-x и overflow-y , чтобы в div отображалась полоса прокрутки в случае, если содержимое не подходит.
Попробуйте установить минимальную высоту (min-height:), а не конкретную, фиксированную высоту.