Как растянуть DIV по высоте от шапки до подвала?

Тема в разделе "Создание шаблона", создана пользователем sapravka, 26.10.2010.

  1. Offline

    sapravka Недавно здесь

    Регистрация:
    17.08.2010
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Собственно сам вопрос:
    Как растянуть DIV (content и left) по высоте: от шапки до подвала (от top до footer)?
    Вот index.html:
    Код (html):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6. <title>Наш сайт</title>
    7. <link href="css/template.css" rel="stylesheet" type="text/css">
    8. </head>
    9. <body>
    10. <div id="body">
    11.     <div id="maket">
    12.       <div id="top">Шапка </div>
    13.       <div id="content">Содержимое сайта</div>
    14.       <div id="left">Левое меню</div>
    15.     </div>
    16.   <div id="footer">Подвал</div>
    17. </div>    
    18. </body>
    19. </html>

    А вот template.css:
    Код (CODE):
    1. body, html {
    2.     margin:0px;
    3.     padding:0px;
    4.     height:100%;
    5. }
    6. #body{
    7.     margin:0px;
    8.     padding:0px;
    9.     min-height:100%;
    10. }
    11. #maket {
    12.     margin:0 auto;
    13.     padding:0px;
    14.     width:1000px;
    15.     background-color:#F00;
    16.     min-height:100%;
    17. }
    18. #top{
    19.     margin:0px;
    20.     padding:0px;
    21.     background-color:#C0C000;
    22.     height:220px;
    23. }
    24. #content{
    25.     margin:0;
    26.     padding:0px;
    27.     width:788px;
    28.     background-color:#8080FF;
    29.     float:right;
    30. }
    31. #left{
    32.     margin:0px;
    33.     padding:0px;
    34.     background-color:#00C0C0;
    35.     height:535px;
    36.     width:212px;
    37. }
    38.  
    39. #footer{
    40.     margin:0 auto;
    41.     margin-top:-50px;
    42.     padding:0px;
    43.     background-color:#FFC0FF;
    44.     clear:both;
    45.     width:1000px;
    46.     height:50px;
    47. }


    В вложенном рисунке отображается черными стрелками - что именно хотелось бы растянуть, так, чтобы при минимум текста блоки content и left было во весь экран, а при увеличении текста более размера экрана увеличивались (растягивались) указанные ранее div автоматический!
    И еще: как сделать что бы в Internet Explorer 6 и 7 версии - отображалось всё корректно?
     

    Вложения:

    • 1.jpg
      1.jpg
      Размер файла:
      34.3 КБ
      Просмотров:
      7
  2.  
  3. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    сколько бы не бился с CSS ничерта не получилось
    делал при помощи JS
    алгоритм прост:
    1. считаем все высоты шапка, горизонтальное меню, подвал
    2. от общей высоты клиентского пространства браузера отнимаем результат из п.1.
    3. присваиваем получившийся в п.2. результат левой колонке, средней и правой (если правая есть)
     
  4. Offline

    sapravka Недавно здесь

    Регистрация:
    17.08.2010
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    А пример можно?
    Для лучшего восприятия...
     
  5. Offline

    ValeryB Активист

    Регистрация:
    07.10.2009
    Сообщения:
    384
    Симпатии:
    26
    Пол:
    Мужской
  6. Offline

    sapravka Недавно здесь

    Регистрация:
    17.08.2010
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    спасибо, но как то он не так, как хотелось...

    А еще есть что нибудь?
     
  7. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    ValeryB, был я там, там нет растяжения на всё возможное пространство, а если есть то оно через КЛИК получается
    на мой взгляд это не вариант

    обыкновенный JS:
    Код (html):
    1. <script language="JavaScript">
    2. window.onload=function () {
    3.  
    4.     var wrapper_h       =getElementComputedStyle("Wrapper", "offsetHeight");
    5.     var header_h        =getElementComputedStyle("Header", "offsetHeight");
    6.     var menuwrapper_h   =getElementComputedStyle("MenuWrapper", "offsetHeight");
    7.     var footer_h        =getElementComputedStyle("Footer", "offsetHeight");
    8.    
    9.     var left_h          =getElementComputedStyle("left", "offsetHeight");
    10.     var cont_h          =getElementComputedStyle("cont", "offsetHeight");
    11.     var right_h         =getElementComputedStyle("right", "offsetHeight");
    12.    
    13.     off_h=parseInt(header_h)+parseInt(menuwrapper_h)+parseInt(footer_h);
    14.    
    15.     if (left_h>right_h) {column_h=left_h} else {column_h=right_h}
    16.     if (cont_h>column_h) {column_h=cont_h}
    17.     if (wrapper_h>(off_h+column_h)) column_h=parseInt(wrapper_h)-(parseInt(off_h)+parseInt(column_h))
    18.  
    19.  
    20.     setElementReComputedStyle("left", "heigth", column_h);
    21.     setElementReComputedStyle("cont", "heigth", column_h);
    22.     setElementReComputedStyle("right", "heigth", column_h);
    23. };
    24. </script>

    с использованием Jquery:
    Код (html):
    1. <script language="JavaScript" src="/js/jquery-1.4.3.min.js"></script>
    2. <script language="JavaScript" src="/js/jquery-1.4.3.min.js">
    3. var jq=jQuery.noConflict();
    4. jq(document).ready(function() {
    5.     var lw=jq("#left").outerWidth();
    6.     var rw=jq("#right").outerWidth();
    7.     var mbw=jq("#MainBody").outerWidth();
    8.     cw=mbw-(lw+rw)-1;
    9.     jq("#cont").width(cw);
    10.    
    11.     var hh=jq("#Header").outerHeight();
    12.     var mwh=jq("#MenuWrapper").outerHeight();
    13.     hm_h=hh+mwh;
    14.     var lh=jq("#left").outerHeight();
    15.     var rh=jq("#right").outerHeight();
    16.     var ch=jq("#cont").outerHeight();
    17.     var bh=jq("body").outerHeight();
    18.    
    19.     if (lh>rh) {lcrh=lh} else {lcrh=rh};
    20.     if (ch>lcrh) lcrh=ch;
    21.    
    22.     all_cont_h=hm_h+lcrh;
    23.     if (bh>all_cont_h) lcrh=bh-hm_h;
    24.    
    25.     jq("#left").height(lcrh);
    26.     jq("#cont").height(lcrh);
    27.     jq("#right").height(lcrh);
    28.  
    29. });
    30. </script>
     
  8. Offline

    ValeryB Активист

    Регистрация:
    07.10.2009
    Сообщения:
    384
    Симпатии:
    26
    Пол:
    Мужской
    Там ясно дано понять, что можно получить без скриптов.
    Потому не следует заморачиваться на сложные гибриды, которые не будут работать при отключенных у пользователя скриптах. Выбрать наиболее подходящий вариант и "спать спокойно". Потому как, одновременное растяжение колонок до футера и прижатие футера, мало где так уж жизненно необходимо.
     
  9. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    согласен, но иной раз заказчику не объяснишь и я выбрал более лёгкий для себя путь решения проблемы
     
  10. Offline

    sapravka Недавно здесь

    Регистрация:
    17.08.2010
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Наверное стоит подумать семь раз, прежде чем один раз использовать JS - он по умолчанию отключен наверное во всех браузерах....

    Как сделать что бы в Internet Explorer 6 и 7 версии - отображалось всё корректно?

    Код (html):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    2. "http://www.w3.org/TR/html4/loose.dtd">
    3. <html>
    4. <head>
    5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    6. <title>Наш сайт</title>
    7. <link href="css/template.css" rel="stylesheet" type="text/css">
    8.     <!--[if lte IE 6]>
    9.         <link rel="stylesheet" type="text/css" href="css/ie6.css">
    10.    <![endif]-->
    11.     <!--[if IE 7]>
    12.         <link rel="stylesheet" type="text/css" href="css/ie7.css">
    13.     <![endif]-->
    14. </head>
    15. <body>
    16. <div id="body">
    17.     <div id="maket">
    18.       <div id="top">Шапка </div>
    19.       <div id="content">Содержимое сайта</div>
    20.       <div id="left">Левое меню</div>
    21.     </div>
    22.   <div id="footer">Подвал</div>
    23. </div>    
    24. </body>
    25. </html>


    Например IE6 не понимает в CSS стиль min-height...и еще другие.
    Я добавил для отображения стилей в отдельную таблицу - но что там прописать ...
    что то ничего быстро не приходит в голову...
     
  11. woojin
    Offline

    woojin Местный Команда форума

    Регистрация:
    31.05.2009
    Сообщения:
    3 209
    Симпатии:
    335
    Пол:
    Мужской
    гугл тебе в помощь, для поиска ответа на вопрос по min-height
    где то я на такое натыкался, точно помню что упорно перед этим гуглися!!!!!
     
  12. Offline

    sapravka Недавно здесь

    Регистрация:
    17.08.2010
    Сообщения:
    5
    Симпатии:
    0
    Пол:
    Мужской
    Да вот думал у кого то есть готовое решение....
     
  13. tallib
    Offline

    tallib Пользователь

    Регистрация:
    26.10.2010
    Сообщения:
    75
    Симпатии:
    20
    Пол:
    Мужской
    А как тебе такой вариант: Прижать футер к низу окна браузера, шапку к верху браузера, а что между 100%? Если пригодится посмотри здесь
     
  14. sergiks
    Offline

    sergiks специалист

    Регистрация:
    10.10.2010
    Сообщения:
    362
    Симпатии:
    36
    Пол:
    Мужской
  15. Offline

    unknownin Недавно здесь

    Регистрация:
    05.04.2015
    Сообщения:
    1
    Симпатии:
    0
    Пол:
    Мужской
    помогите кто сможет футер когда задаю позицию relative все ссылку перестают работать как мне этого избежать?

    Shurikkan: Твоё сообщение невозможно читать. Может начать пользоваться знаками препинания?
     
    Последнее редактирование модератором: 22.10.2015

Поделиться этой страницей

Загрузка...