Собственно сам вопрос: Как растянуть DIV (content и left) по высоте: от шапки до подвала (от top до footer)? Вот index.html: Код (html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Наш сайт</title> <link href="css/template.css" rel="stylesheet" type="text/css"> </head> <body> <div id="body"> <div id="maket"> <div id="top">Шапка </div> <div id="content">Содержимое сайта</div> <div id="left">Левое меню</div> </div> <div id="footer">Подвал</div> </div> </body> </html> А вот template.css: Код (CODE): body, html { margin:0px; padding:0px; height:100%; } #body{ margin:0px; padding:0px; min-height:100%; } #maket { margin:0 auto; padding:0px; width:1000px; background-color:#F00; min-height:100%; } #top{ margin:0px; padding:0px; background-color:#C0C000; height:220px; } #content{ margin:0; padding:0px; width:788px; background-color:#8080FF; float:right; } #left{ margin:0px; padding:0px; background-color:#00C0C0; height:535px; width:212px; } #footer{ margin:0 auto; margin-top:-50px; padding:0px; background-color:#FFC0FF; clear:both; width:1000px; height:50px; } В вложенном рисунке отображается черными стрелками - что именно хотелось бы растянуть, так, чтобы при минимум текста блоки content и left было во весь экран, а при увеличении текста более размера экрана увеличивались (растягивались) указанные ранее div автоматический! И еще: как сделать что бы в Internet Explorer 6 и 7 версии - отображалось всё корректно?
сколько бы не бился с CSS ничерта не получилось делал при помощи JS алгоритм прост: 1. считаем все высоты шапка, горизонтальное меню, подвал 2. от общей высоты клиентского пространства браузера отнимаем результат из п.1. 3. присваиваем получившийся в п.2. результат левой колонке, средней и правой (если правая есть)
ValeryB, был я там, там нет растяжения на всё возможное пространство, а если есть то оно через КЛИК получается на мой взгляд это не вариант обыкновенный JS: Код (html): <script language="JavaScript"> window.onload=function () { var wrapper_h =getElementComputedStyle("Wrapper", "offsetHeight"); var header_h =getElementComputedStyle("Header", "offsetHeight"); var menuwrapper_h =getElementComputedStyle("MenuWrapper", "offsetHeight"); var footer_h =getElementComputedStyle("Footer", "offsetHeight"); var left_h =getElementComputedStyle("left", "offsetHeight"); var cont_h =getElementComputedStyle("cont", "offsetHeight"); var right_h =getElementComputedStyle("right", "offsetHeight"); off_h=parseInt(header_h)+parseInt(menuwrapper_h)+parseInt(footer_h); if (left_h>right_h) {column_h=left_h} else {column_h=right_h} if (cont_h>column_h) {column_h=cont_h} if (wrapper_h>(off_h+column_h)) column_h=parseInt(wrapper_h)-(parseInt(off_h)+parseInt(column_h)) setElementReComputedStyle("left", "heigth", column_h); setElementReComputedStyle("cont", "heigth", column_h); setElementReComputedStyle("right", "heigth", column_h); }; </script> с использованием Jquery: Код (html): <script language="JavaScript" src="/js/jquery-1.4.3.min.js"></script> <script language="JavaScript" src="/js/jquery-1.4.3.min.js"> var jq=jQuery.noConflict(); jq(document).ready(function() { var lw=jq("#left").outerWidth(); var rw=jq("#right").outerWidth(); var mbw=jq("#MainBody").outerWidth(); cw=mbw-(lw+rw)-1; jq("#cont").width(cw); var hh=jq("#Header").outerHeight(); var mwh=jq("#MenuWrapper").outerHeight(); hm_h=hh+mwh; var lh=jq("#left").outerHeight(); var rh=jq("#right").outerHeight(); var ch=jq("#cont").outerHeight(); var bh=jq("body").outerHeight(); if (lh>rh) {lcrh=lh} else {lcrh=rh}; if (ch>lcrh) lcrh=ch; all_cont_h=hm_h+lcrh; if (bh>all_cont_h) lcrh=bh-hm_h; jq("#left").height(lcrh); jq("#cont").height(lcrh); jq("#right").height(lcrh); }); </script>
Там ясно дано понять, что можно получить без скриптов. Потому не следует заморачиваться на сложные гибриды, которые не будут работать при отключенных у пользователя скриптах. Выбрать наиболее подходящий вариант и "спать спокойно". Потому как, одновременное растяжение колонок до футера и прижатие футера, мало где так уж жизненно необходимо.
Наверное стоит подумать семь раз, прежде чем один раз использовать JS - он по умолчанию отключен наверное во всех браузерах.... Как сделать что бы в Internet Explorer 6 и 7 версии - отображалось всё корректно? Код (html): <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Наш сайт</title> <link href="css/template.css" rel="stylesheet" type="text/css"> <!--[if lte IE 6]> <link rel="stylesheet" type="text/css" href="css/ie6.css"> <![endif]--> <!--[if IE 7]> <link rel="stylesheet" type="text/css" href="css/ie7.css"> <![endif]--> </head> <body> <div id="body"> <div id="maket"> <div id="top">Шапка </div> <div id="content">Содержимое сайта</div> <div id="left">Левое меню</div> </div> <div id="footer">Подвал</div> </div> </body> </html> Например IE6 не понимает в CSS стиль min-height...и еще другие. Я добавил для отображения стилей в отдельную таблицу - но что там прописать ... что то ничего быстро не приходит в голову...
гугл тебе в помощь, для поиска ответа на вопрос по min-height где то я на такое натыкался, точно помню что упорно перед этим гуглися!!!!!
А как тебе такой вариант: Прижать футер к низу окна браузера, шапку к верху браузера, а что между 100%? Если пригодится посмотри здесь
помогите кто сможет футер когда задаю позицию relative все ссылку перестают работать как мне этого избежать? Shurikkan: Твоё сообщение невозможно читать. Может начать пользоваться знаками препинания?
