-
Подскажите, как сделать следующее:
Есть ДИВ, его высота 100рх, он синего цвета (чтобы видно было его).
В нем находится текст.
Если текста мало, то всё нормально, а вот если текст по высоте превышает 100рх, то он выходит снизу за границы синего ДИВА (за исключением IE).
Как сделать, чтобы содержимое не виходило за границы, а просто синий ДИВ растягивался в зависимости от содержимого? При этом он не должен быть меньше чем 100рх в высоту!
ВНИМАНИЕ! Интересует только круссбраузерный вариант решения этой проблемы!!!
-
у вас высота div скорее всего задана через height, это свойство не подразумевает растягивание блока при его переполнении. для правильных браузеров выставьте min-height, тогда блок будет не менее заданной высоты, а при переполнении будет тянуться. для IE выставьте height с нужным параметром и закройте его от правильных браузеров хаком (IE понимет height так, как должен бы был понимать min-height, тоже касается и width и min-width). пример.
Код:
min-height: 100px;
/height: 100px;
-
-
Скажите, как сделать два блока в ширину, чтобы один был фиксированного размера, а второй растягивался, скажем ширина первого блока 200px, а второй занимает оставшееся пространство?
-
Вот недавно делал скелет для шаблончика...
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;
}
-
Уфф, спасибо большое! Правда пришлось доработать
Код:
<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 пока не структурировал, все вперемешку написано.
-
Цитата:
Originally posted by Зверь@Dec 28 2006, 16:12
Единственное, что надо следить чтобы контент стоял на всю высоту, тогда выглядит идеально.* Ну или sidebar и контент одного цвета делать, тогда тоже ничего.
Только CSS пока не структурировал, все вперемешку написано.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
[/quote]
для таких целей есть обманный трюк. ко внешнему контейнеру необходимо прикрепить фон по размеру и содержимому являющемуся фоном сайдбара, сместить этот фон налево, запретить ему по горизонтали дублироваться и растянуть по высоте, на выходе имеем имитацию тянущейся колонки, иначе в css-верстке никак, стандартными средствами xhtml+css зависимость одного блока от другого не сделаешь.
-
Точно делаем для body изображение ширины и цвета сайдбара, а фоновый цвет фонового цвета контента. Гениально!
Маленькое уточнение, что означает
Код:
* {
margin: 0;
padding: 0;
}
-
Цитата:
Originally posted by Зверь@Dec 28 2006, 17:42
Точно делаем для body изображение ширины и цвета сайдбара, а фоновый цвет фонового цвета контента. Гениально!
Маленькое уточнение, что означает
Код:
* {
margin: 0;
padding: 0;
}
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]</div>
* - универсальный селектор, который позволяет выбрать все элементы документа. данное правило позволяет сбросить все отступы и поля для всех элементов в ноль, т.к. у разных браузеров они различны.
