Вид для печати
Добрый день!
Есть DIV втутри его три DIV-а
Как привязать 1 DIV к верхнему краю
2-ой к нижнему краю
а высоту стреднего задать оставшуюся между ними т.е.
<DIV ID="MAIN" height=400>
<DIV ID="top" height=20><DIV>
<DIV ID="content"> а этот должен занимать все пространство между этими двумя<DIV>
<DIV ID="bottom" height=20><DIV>
</DIV>
as111, у div нет атрибута height, используйте style="height: ___px".
Высота родительского блока известна?
Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
****<title></title>
****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
****<style type="text/css">
****/*<![CDATA[*/
*****{ margin: 0; padding: 0; }
****html,body{ height: 100%; }
****#main{ height: 100%; background: #f2f2f2; }
****html>body #main{ height: auto; min-height: 100%; }
****#header, #footer{ position: relative; height: 20px; background: #ccc; }
****#footer{ margin-top: -20px; }
****#content{ padding-bottom: 20px; }
****/*]]>*/
****</style>
</head>
****
<body>
****<div id="main">
*<div id="header">Header</div>
*<div id="content">Main</div>
****</div>
****<div id="footer">Footer</div>
</body>
</html>
Добрый день!
Да, действитеьлно высоты нет - это я в торопях написал.
Спасибо, за пример. Но или я что-то не так написал или пример не правильно работает. Попробую более подробно описать, что требуется.
Есть контейнер DIV, пусть его высота будет 400
в нем есть шапка с высотой 50
в нем есть низ с высотой 50
а между низом и верхом должен быть DIV высотой 400-50-50 = 300
Причем если он больше, то должны появляться полосы прокрутки.
Цифра 400 может изменяться, 50 и 50 - постоянные цифры.
Мне надо чтобы вычислялся размер среднего дива.
Самый хороший пример, того что мне надо получить - это примерно панель в Outlook, т.е. есть что-но наверху, есть что-то внизу, а середина растягивается-сжимается.
Вот такая вот задачка. Уж третий день бьюсь.
[Only registered and activated users can see links. Click Here To Register...]
Аутлук не видел, но наверное выглядит примерно так. [Only registered and activated users can see links. Click Here To Register...]
as111, смысл тот же.
Либо вариант DareDevil'a +Код:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru">
<head>
****<title></title>
****<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
****<style type="text/css">
****/*<![CDATA[*/
*****{ margin: 0; padding: 0; }
****#main{ height: 400px; background: #f2f2f2; }
****#header, #footer{ position: relative; height: 50px; background: #ccc; }
****#header{ margin-bottom: -50px; }
****#footer{ margin-top: -50px; }
****#content{ padding: 50px 0; }
****/*]]>*/
****</style>
</head>
****
<body>
****<div id="header">Header</div>
****<div id="main">
*<div id="content">Main</div>
****</div>
****<div id="footer">Footer</div>
</body>
</html>
Код:* html #container{height: 1px;}
А чего это даст?Цитата:
Originally posted by makeitso
[b]+
DareDevil, будет работать в IE5.x [Only registered and activated users can see links. Click Here To Register...]
Он же не увидит такую запись. Или увидит?
DareDevil, увидят все IE, кроме 7-го.
[/quote]Цитата:
Originally posted by as111@Jul 8 2006, 08:49
Есть контейнер DIV, пусть его высота будет 400
в нем есть шапка с высотой 50
в нем есть низ с высотой 50
а между низом и верхом должен быть DIV высотой 400-50-50 = 300
Причем если он больше, то должны появляться полосы прокрутки.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
DTD XHTML 1.0 Transitional
Основной блок
<div class="basisd">
</div>
.basisd{height: 400px;}
в нем два блока по 50рх
<div class="basisd">
<div class="topd">
div top
</div>
<div class="bottd">
div bottom
</div>
</div>
.basisd{height: 400px;}
.topd, .bottd{height: 50px;}
Между блоками по 50, блок высотой 300рх. При переполнении будет иметь прокрутку.
<div class="basisd">
<div class="topd">
div top
</div>
<div class="centd">
Блок с прокруткой, при переполнении.
</div>
<div class="bottd">
div bottom
</div>
</div>
.basisd{height: 400px;}
.topd, .bottd{height: 50px;}
.centd{height: 300px; overflow: auto;}
[/quote]Цитата:
Originally posted by as111@Jul 8 2006, 08:49
Цифра 400 может изменяться, 50 и 50 - постоянные цифры.
Мне надо чтобы вычислялся размер среднего дива.
<div align='right'>[Only registered and activated users can see links. Click Here To Register...]
Тут не понятно. Если полоса прокрутки должна появляться на блоке в 400рх, то блоки по 50 должны иметь фиксированное положение, но Internet Explorer 6 это не поддерживает.
немного не по теме, но... что означает вот эта запись?
Код:<style type="text/css">
/*<![CDATA[*/
...
/*]]>*/
</style>
Zigzag, экранирование CSS стилей от XML парсера, насколько я помню.
Pupil, ну, прокрутку городить, имо некошерно. [Only registered and activated users can see links. Click Here To Register...] Тем более, что высота среднего блока должна изменятся, как я понял.
DareDevil прокрутка... Я понял так, что именно она ему нужна
Думаю лишний вариант не помешает.Цитата:
а между низом и верхом должен быть DIV высотой 400-50-50 = 300
Причем если он больше, то должны появляться полосы прокрутки.
Я в стилях еще только новичок.
Или я не могу врубиться, или я не правильно объясняю, или закрадывается впечатление, что это сделать невозможно.
Спасибо за ответы.
Эти примеры примеры выглядят замечательно, но если в КОНТЕНТ вставить БОЛЬШОЙ текст, то все это дело либо растягивается, либо полосы "криво" рисуются.
Ну как бы еще объяснить?... Дело в том что я делаю компонент, который можно разместить на странице в любом месте. Т.е. размеры его я его пока не знаю. Но он должен заполнить все его пространство куда его вставили т.е. height=100% или какой-то размер пусть 400px
Есть шапка 50
У вот эта часть должна быть вычисляемой и не должна выходить за пределы 400px
Есть футер 50
Наверно проще нарисовать, см. файл
Высоту MAIN я не знаю, она будет заваться пользователем, скриптами или еще чем, это не важно. Но она может динамически измениться. В зависимости от этого мой CONTENT должен сжаться или растянуться, но не выйти за пределы. Т.е. должны появиться полосы прокрутки.
В сам CONTENT может быть загружено 1 строка или 1000, в этом случае он тоже должен вести себя адекватно, т.е. не выходить за границы, рисовать полосу прогрутки, минимальный размер тоже должне соблюдаться...
as111 Можно уточнить?
MAIN - минимальная высота должна быть 400рх, а максимальная - 100% окна браузера?
CONTENT - минимальная 300рх, а максимальная зависит от высоты MAIN?
ТОР - должен быть прижатым к верхней границе MAIN и находиться внутри него?
ВОТТОМ - должен быть прижатым к нижней границе MAIN и находиться внутри него?
CONTENT - при переполнении, должен иметь полосы прокрутки?
Точно! Именно это и хочется получить.
Можно даже не заморачиваться на минимальных размерах. Бог с ним, главное чтобы эта конструкция не вылазила за пределы отведенной для нее высоты...
<div class="main">
<div class="top">
div top
</div>
<div id="content">
Блок с прокруткой, при переполнении.
</div>
<div class="bottom">
div bottom
</div>
</div>
.top, .bottom{height: 50px;}
#content{height: 300px; overflow: auto;}
Ну и че, ставь main в нужное место, а нужную высоту меняй для content (высота main минус 100рх и получаешь высоту content). Т.к. content имеет фиксированную высоту, то для прокрутки используешь overflow. Main будет обрамлять три блока, т.к. высота не задана.
А менять и считать - скриптом, или пользователь задаст.