Высота div

Sever87 · May 12, 2008

Здравствуйте. Помогите, пожалуйста, решить такую проблему. Высота правого divа не растягивается под высоту рисунка в н?м. Т.е. если текст будет не слишком длинным, то рисунок вылезет за пределы divа, т.к. его высота divа зависит только от объ?ма текста. Как это можно исправить?

<html>
<head>
<title>Document</title>
<style type="text/css">
#menu{
 float:left;
 background-color:#6699FF;
 width:100px;
}
#content {
 background: #e3e8cc;
 margin-left: 110px;

}
</style>
</head>
<body>
<div id="menu">
Ссылка 1

Ссылка 2

Ссылка 3

Ссылка 4

</div>

<div id="content">
<img src="images/1.jpg" align="left">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna
liguam erat volutpat.
</div>

</body>
</html>

yopopt · May 12, 2008

Можно добавить ему свойство overflow:auto; или же после текста вставить
(можно любой другой элемент).

Sever87 · May 13, 2008

Большое спасибо!

Но почему-то работает только в Opera, а в IE7 нет

3ABAPKA · May 13, 2008

Попробуй!

*hight:???px & min-hight:???px

вместо ??? размеры в пикселях

*hight для IE а min-hight - Opera, FF, NN

Sever87 · May 13, 2008

height может быть а не hight?

ну так это даст фиксированную высоту, а мне это не нужно

yopopt · May 13, 2008

Большое спасибо!
Но почему-то работает только в Opera, а в IE7 нет

Добавьте доктайп, а в #content свойство height:100%;. Без доктайпа скорее всего прид?тся блок #content вкладывать в ещ? один блок:

<div>
 <div id="content">
 ...
 </div>
</div>

Если будете использовать overflow, посмотрите как ваша в?рстка будет выглядеть в Firefox. В н?м работа этого свойства несколько отличается от Оперы и IE.

3ABAPKA · May 13, 2008

height может быть а не hight?
ну так это даст фиксированную высоту, а мне это не нужно

Это даст фиксированную минимальную высоту, а если текста больше то див растянется

yopopt · May 13, 2008

height может быть а не hight?
ну так это даст фиксированную высоту, а мне это не нужно
Это даст фиксированную минимальную высоту, а если текста больше то див растянется

Этот способ имеет один недостаток. Возможна ситуация, когда картинки в блоках различного размера, например:

<div>
 <img style="height:50px;float:left" />
 Некая строка текста
</div>
<div>
 <img style="height:100px;float:left" />
 Ещ? одна строка текста
</div>

Какой здесь задать min-height? Если min-height будет равняться 50px, то во втором блоке изображение будет вылезать за пределы самого блока. Если же сделать наоборот 100px, то в первом блоке под изображением появится лишнее пустое пространство. Устанавливать каждому блоку отдельный min-height не рационально. Так что в таком варианте данный способ неприемлем, в других случаях - вполне.

3ABAPKA · May 14, 2008

Ok

Sign In

Высота div

Question

Sever87

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

yopopt

Link to comment

Share on other sites

Sever87

Link to comment

Share on other sites

3ABAPKA

Link to comment

Share on other sites

Sever87

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

3ABAPKA

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

3ABAPKA

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information