Добрый день!
Есть 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, т.е. есть что-но наверху, есть что-то внизу, а середина растягивается-сжимается.
Вот такая вот задачка. Уж третий день бьюсь.
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
Он же не увидит такую запись. Или увидит?
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'>[Только зарегистрированные пользователи могут видеть ссылки. ]
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]
Тут не понятно. Если полоса прокрутки должна появляться на блоке в 400рх, то блоки по 50 должны иметь фиксированное положение, но Internet Explorer 6 это не поддерживает.
немного не по теме, но... что означает вот эта запись?
Код:<style type="text/css"> /*<![CDATA[*/ ... /*]]>*/ </style>
Zigzag, экранирование CSS стилей от XML парсера, насколько я помню.
Pupil, ну, прокрутку городить, имо некошерно.
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 будет обрамлять три блока, т.к. высота не задана.
А менять и считать - скриптом, или пользователь задаст.
Ваши права
