Относительная высота DIVа

**Webtailor** · 27.12.2006, 23:27

Подскажите, как сделать следующее:
Есть ДИВ, его высота 100рх, он синего цвета (чтобы видно было его).
В нем находится текст.
Если текста мало, то всё нормально, а вот если текст по высоте превышает 100рх, то он выходит снизу за границы синего ДИВА (за исключением IE).

Как сделать, чтобы содержимое не виходило за границы, а просто синий ДИВ растягивался в зависимости от содержимого? При этом он не должен быть меньше чем 100рх в высоту!
ВНИМАНИЕ! Интересует только круссбраузерный вариант решения этой проблемы!!!

**Zigzag** · 28.12.2006, 02:30

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

Код:

min-height: 100px;
/height: 100px;

**Webtailor** · 28.12.2006, 11:50

Спасибо!!!

**Зверь** · 28.12.2006, 13:36

Скажите, как сделать два блока в ширину, чтобы один был фиксированного размера, а второй растягивался, скажем ширина первого блока 200px, а второй занимает оставшееся пространство?

**Zigzag** · 28.12.2006, 17:02

Вот недавно делал скелет для шаблончика...

xhtml

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title></title>
<style type="text/css" media="all">
****@import url("style.css");
</style>
</head>
<body>

<div id="container-main">
****<div id="header">header</div>
****<div id="sidebar">sidebar</div>
****<div id="content">content</div>****
****<div id="footer">footer</div>
</div>

</body>
</html>

css

Код:

* {
****margin: 0;
****padding: 0;
}
html, body {
****width: 100%;
****height: 100%;
}
#container-main {
****width: 100%;
****height: 100%;
}
#header {
****height: 20%;
****background: #EEA6A6;
}
#sidebar {
****width: 200px;
****height: 60%;
****float: left;
****background: #BDDF7A;
}
#content {
****height: 60%;
****margin-left: 200px;
****background: #D3D3D3;
}
#footer {
****height: 10%;
****clear: both; 
****background: #ADDDFC;
}

**Зверь** · 28.12.2006, 18:12

Уфф, спасибо большое! Правда пришлось доработать

Код:

<body>
<div id="header">header</div>
<div id="center">
<div id="sidebar">sidebar</div>
<div id="content">
<div id="content1">


1</p>

1</p>

1</p>

1</p>

5</p>


1</p>

1</p>

1</p>

1</p>

5</p>


1</p>

1</p>

1</p>

1</p>

5</p>


1</p>

1</p>

1</p>

1</p>

5</p>


1</p>

1</p>

1</p>

1</p>

5</p>


1</p>

1</p>

1</p>

1</p>

5</p>
</div></div>
</div> 
<div id="footer">footer</div>
</body>

Код:

* {
margin: 0;
padding: 0;
}
html, body {
width: 100%;
height: 100%;
background: #BDDF7A;
}
#header {
height: 100px;
width: 100%;
background: #EEA6A6;
}
#sidebar {
width: 200px;
height: 60%;
float: left;
background: #BDDF7A;
padding-bottom: 50px;
}
#center {
width: 100%;
}
#content {
margin-left: 200px;
background: #D3D3D3;
padding-bottom: 50px;
}
#content1 {
width: 99%;
}
#footer {
height: 50px;
width: 100%;
background: #ADDDFC;
position: absolute;
bottom: 0;
}

body {
 *min-height: 100%;
 *height: auto !important;
 *height: 100%;
 *position: relative;
}

Теперь во всех трех браузерах выглядит одинаково и ведет себя идеально. Единственное, что надо следить чтобы контент стоял на всю высоту, тогда выглядит идеально. Ну или sidebar и контент одного цвета делать, тогда тоже ничего.
Только CSS пока не структурировал, все вперемешку написано.

**Zigzag** · 28.12.2006, 19:08

Originally posted by Зверь@Dec 28 2006, 16:12
Единственное, что надо следить чтобы контент стоял на всю высоту, тогда выглядит идеально.* Ну или sidebar и контент одного цвета делать, тогда тоже ничего.
Только CSS пока не структурировал, все вперемешку написано.
<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]

[/quote]

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

**Зверь** · 28.12.2006, 19:42

Точно делаем для body изображение ширины и цвета сайдбара, а фоновый цвет фонового цвета контента. Гениально!

Маленькое уточнение, что означает

Код:

* {
margin: 0;
padding: 0;
}

**Zigzag** · 28.12.2006, 19:56

Originally posted by Зверь@Dec 28 2006, 17:42
Точно делаем для body изображение ширины и цвета сайдбара, а фоновый цвет фонового цвета контента. Гениально!

Маленькое уточнение, что означает

Код:

* { margin: 0; padding: 0; }

<div align='right'>[Только зарегистрированные пользователи могут видеть ссылки. ]</div>

* - универсальный селектор, который позволяет выбрать все элементы документа. данное правило позволяет сбросить все отступы и поля для всех элементов в ноль, т.к. у разных браузеров они различны.

Тема: Относительная высота DIVа

Опции темы

Поиск по теме

Отображение

Похожие темы

Высота дива

100% высота для div-а

высота div в IE

ВЕРТИКАЛЬНОЕ ВЫРАВНИВАНИЕ ТЕКСТА ВНУТРИ DIVа

относительная адресация... или как там ее..

Ваши права