div неправильно тянется
Вложений: 1
Здравствуйте!
Растянуть div на всю страницу, казалось бы, что может быть проще, а не получается, в ie выходит за пределы и появляется скроулинг, в мозиле не работает. приведу отвечающие за это строки и весь шаблон со стилями во вложении
html {
height:100%;
}
body {
margin:0;
padding:0;
height:auto !important;
height:100%;
min-height:100%;
}
#content {
margin: 10px 0px 0px 250px;
background:url(dataimg/fon_car.jpg);
border-style:double;
padding: 0px;
background-color: #ffffff;
height:100%;
}
<div id="content">
<div id="right">{firm}</div>
<div id="hierarhy">{menu_hierarhy}</div>
<div id="hierarhy">{content}</div>
</div>
|
ok, хватайся за левый верхний угол, а я потащу за нижний правый... :)
начни с такой странички, добавляй на нее информацию, пока не наткнешься на проблему
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#content {
height: 100%;
background: #999;
}
</style>
</head>
<body>
<div id="content">
</div>
</body>
</html>
Да и не нужно тебе, чтобы у #content был height: 100%, ты же хочешь, чтоб вся страничка была минимум по высоте окна И где там в ie scrolling? Он по умолчанию в ie отображается, даже если содержимое помещается по высоте |
поместил все в контейнер, который растягивается на 100 % по высоте страницы.
#container {
min-height: 100%;
background-color: #DDD;
width: 100%;
margin: 0 auto;
}
* html #container {
height: 100%;
}
<body>
<div id="container">
...
<div id="content">
<div id="right">{firm}</div>
<div id="hierarhy">{menu_hierarhy}</div>
<div id="hierarhy">{content}</div>
</div>
</div>
</body>
для фаерфокс сработало такое
#content {
position:fixed;
width:-moz-available;
margin: 10px 0px 0px 250px;
background:url(dataimg/fon_car.jpg);
border-style:double;
padding: 0px;
background-color: #ffffff;
height:100%;
}
а для остальных нет. в общем каким образом можно растянуть див (content) по высоте примерно от середины страницы до низа родительского блока container |
Пока установлен
height в любое значение, кроме auto, min-height не имеет смысла.С другой стороны, любое процентное значение height, если у родителя height установлен в auto — 0.Вдобавок, полная ширина/высота элемента составляется из width/height (соответственно), padding и margin.В итоге получаем примерно такое:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
html, body {
height: 100%; /* у HTML 100% от ICB, у BODY - от HTML */
margin: 0px;
}
#container {
min-height: 100%; /* нормальные браузеры */
}
* html #container {
height: 100%; /* программа-калейдоскоп для просмотра случайных картин на основе HTML 4.01 */
}
#container-inner {
padding: 50px; /* мы не можем задать его непосредственно #container */
}
/* декорация */
#container {
background: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
color: #000000;
font: normal normal normal 52px/normal 'Myriad Pro', 'Trebuchet MS', sans-serif;
text-shadow: #FFFFFF 0px 0px 3px;
}
</style>
</head>
<body>
<div id="container">
<div id="container-inner">
Вдруг, охотник выбегает,<br />
Прямо в зайчика стреляет.<br />
Пиф-паф! Ой-ой-ой!<br />
Умирает зайчик мой.</div>
</div>
</body>
</html>
|
И к сожалению мы вернулись к тому к чему пришли.
если я устанавливаю container над той областью, которая мне нужна
<div id="container">
<div id="container-inner">
<div id="right">{firm}</div>
<div id="hierarhy">{menu_hierarhy}</div>
<div id="hierarhy">{content}</div>
</div>
</div>
то высота больше чем 100%, за счет тех элементов, что висят выше. Если я устанавливаю, скажем 80%, то при одном разрешении вписывается, при других высотах экрана или не хватает или переваливает.Если я запихиваю в контейнер
<div id="container">
<body>
..... здесь набирается процентов 30% по высоте
<div id="container-inner">
<div id="right">{firm}</div>
<div id="hierarhy">{menu_hierarhy}</div>
<div id="hierarhy">{content}</div>
</body>
</div>
то фоновая картинка распространяется на весь документ, что а мне нужно, что бы фон распространялся на часть документа от середины примерно до низа при любом разрешении. ЯЯ думаю помогло бы расположение фона по определенным координатам, например bacground-repeat-x:, но он только в ie существует |
Вы знаете точно высоту элементов сверху (хотя бы в процентах или пикселях)?
Если да, то:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<style type="text/css">
html, body {
height: 100%; /* у HTML 100% от ICB, у BODY - от HTML */
margin: 0px;
position: relative;
}
#container {
position: absolute;
top: 50px;
bottom: 0px;
width: 100%;
left: 0px;
overflow: auto;
}
#container-inner {
padding: 50px; /* мы не можем задать его непосредственно #container */
}
/* декорация */
#container {
background: url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif);
color: #000000;
font: normal normal normal 52px/normal 'Myriad Pro', 'Trebuchet MS', sans-serif;
text-shadow: #FFFFFF 0px 0px 3px;
}
</style>
</head>
<body>
<div>blah blah blah<br />blah blah blah</div>
<div id="container">
<div id="container-inner">
Вдруг, охотник выбегает,<br />
Прямо в зайчика стреляет.<br />
Пиф-паф! Ой-ой-ой!<br />
Умирает зайчик мой.</div>
</div>
</body>
</html>
Но этот вариант честно не работает в IE6. Если Вам неизвестна заранее высота перед блоком, или Вам нужна поддержка IE6, я могу посоветовать Вам использовать таблицы, либо костыли на яваскрипте. |
Спасибо Вам, дорогие друзья!
Я использовал таблицы, Все отлично))! |
| Часовой пояс GMT +3, время: 07:41. |