ФорумРазработкаКлиентская сторонаВерстка и оформление → DIV прижат к низу окна. Как теперь середину расстянуть на всё простр.?

DIV прижат к низу окна. Как теперь середину расстянуть на всё простр.?

  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 9 сентября 2009 г. 13:27, спустя 2 часа 30 минут 16 секунд

    Нифига у меня не получается. Ни таблицами ни дивами …

    Скотина IE … то так не так, то то ни сё.

    Подожду, пока Тимур выспится … может что получится …
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 9 сентября 2009 г. 14:24, спустя 57 минут 7 секунд

    AndryG, мне всю ночь делать лабы по метоптам, так что врядли сегодня дождешься.

    Дабы рамку поставить. :) (и не надо ржать :))))) )

    хм. А если например нижний край рамки поместить в футер, а верхний - в хеадер? (заверни для этого их в другие блоки и установи им border-top и border-bottom соответственно). Слева и справа сделай рамку через background, а что б не воротить лишние дивы используй body и родительский блок шапки и подвала. Сделай gif'ку 1x1 и —
    body { background:url(border_1x1.gif) repeat-y left top; } /* левая сторона рамки  */
    #content { background:url(border_1x1.gif) repeat-y right top; } /* правая сторона рамки */

    где #content — блок, в котором находятся шапка и подвал

    это так, фантазия, как вариант. Попозже попробую сделать нормально …
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 9 сентября 2009 г. 14:29, спустя 4 минуты 44 секунды

    Я две недели колупался %) и сегодня не жду ничего.
    Тоже думал про изврат с картинками… захотелось нормально … жена скоро с дома выгонит или комп выбросит с этой версткой :)
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 9 сентября 2009 г. 15:03, спустя 34 минуты 34 секунды

    <html>
     <body>
       <div id="header">
       header
       </div>
       <div id="content">
       content
       </div>
       <div id="footer">
       footer
       </div>
     </body>
    </html>


    #header
    {
    width:100%;
    height: 50px; /*хз сколько тебе надо? :)*/
    background: #CBE0CB;
    border: 1px solid #208316;
    color: #008040;
    }
    #content
    {
    width:100%;
    height: auto;
    background: #E7EEE7;
    border: 1px solid #FF0000;
    color: #000000;
    }
    #footer
    {
    width:100%;
    height: 50px; /*хз сколько тебе надо? :)*/
    background: #CBE0CB;
    border: 1px solid #208316;
    color: #000000;
    }

    не пробывал, но не ужели это не так?
    Спустя 26 сек.
    щас погоди, забыл прижать футер. Щас прижмем
  • mario

    Сообщения: 6067 Репутация: N Группа: Джедаи

    Spritz 9 сентября 2009 г. 15:16, спустя 12 минут 29 секунд

    в общем завтра, щас уставший… я спать. всем споки! :)
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 10 сентября 2009 г. 2:05, спустя 10 часов 49 минут 23 секунды

    Не надо header.
    Под менюшкой может появляться доп. строка меню, похожая панель сообщений … одним словом, высота блока неизвестна.
    Пусть идет в основном блоке.

    Понаглею … а вот если получится вариант с возможность добавления боковой панели, то было бы круто.
    Спустя 45 сек.
    И уменя ширина фиксированная под 1024 расширение.
  • Givi

    Сообщения: 2284 Репутация: N Группа: Адекваты

    Spritz 10 сентября 2009 г. 2:25, спустя 19 минут 25 секунд

    AndryG, я скинул ссылку, где все колонки растягиваются на высоту в 100% при опущенном вниз футере. http://pyha.ru/forum/topic/3381.msg69251#msg69251
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 10 сентября 2009 г. 3:20, спустя 55 минут 41 секунду

    Да, я видел, спасибо. Хорошо, что с текстом пояснений - есть на чем поучится.
    Вчера не мог зайти туда.

    Желания у меня, видать, неправильные… никто (и по Вашей ссылке тоже) не тянет центральный див на всю высоту. :)

    Вернулся опять к первоначальному вариант.

    Пробую через JS устанавливать высоту центрального блока.

    Если в FF ещё хоть нечто получается - надо считать толком все границы/отступы и всё становится на место.
    То IE, при появлении полос прокутки, упорно считает их в высоту/ширина окна и получается вообще попа.

    Пока остановился на варианте установки высоты только в событии onload.
    Фигня полная … понимаю, но надо дальше двигаться, а то я на этой верстке свихнусь :)
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 14 сентября 2009 г. 5:21, спустя 4 дня 2 часа

    Продолжаю колупать …

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=windows-1251">
     <link rel="icon" href="http://work.spider/favicon.ico" type="image/x-icon">
     <link rel="STYLESHEET" type="text/css" href="12_files/default.css">
     <title></title>
     <script type="text/javascript" src="12_files/jquery.js"></script>
     <script>
       $(window).ready(function(){
         $('#scl_main').height(
           $('#scl_content').height() - $('#scl_main').position().top - $('#scl_footer_ground').height() - 2
         );
       });
     </script>
    </head>
    <body id="body" style="background-color: rgb(231, 238, 231); font-family: Arial,sans-serif; font-size: 10pt;">
    <div id="scl_content">
    <div id="main_menu" class="main_menu">
     .:: <a href="http://work.spider/">Головна</a> ::.
    </div>
    <div id=scl_main>content</div>
    <div id="scl_footer_ground"> </div>
    </div> <!–scl_content–>
    <div id="scl_footer"></div>
    </body>
    </html>

    Устанавливаю высоту центрального дива через JS. Пока только при загрузке страницы.

       $(window).ready(function(){
         $('#scl_main').height(
           $('#scl_content').height() - $('#scl_main').position().top - $('#scl_footer_ground').height() - 2
         );
       });

    Не могу найти 1 пиксель высоты … видать наткнулся на глюк IE6,7.

    FF3, IE8 показывает нормально. А в младших IE (6,7) появляется один лишний бит высоты и полоса прокрутки вместе с ним

    Поможете найти?
    1. 12.rar (75)
    2. 12.png (128)
  • Trej Gun

    Сообщения: 5299 Репутация: N Группа: в ухо

    Spritz 14 сентября 2009 г. 6:07, спустя 46 минут 25 секунд

    падинги и маргины посмотри или бордер
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 14 сентября 2009 г. 6:59, спустя 51 минуту 17 секунд

    перерыл я уже все маргины и паддингы … не нашёл … вот и прошу помощи.

    Ещё фигня … если в скрипте поставить минус три, а не два.

    То над футером получается зазор два пикселя … о тех пор, пока контент меньше окна … потом будет единича
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 16 сентября 2009 г. 9:59, спустя 2 дня 3 часа

    http://ryanfait.com/sticky-footer/
    ιιlllιlllι унц-унц
  • AndryG

    Сообщения: 237 Репутация: N Группа: Адекваты

    Spritz 16 сентября 2009 г. 10:31, спустя 31 минуту 22 секунды

    Прижатый футер уже реализован. По такому же алгоритму.
    Проблема теперь растянуть центральный DIV (в я content написал на примере выше) от верха до футера.

    В Вашем примере этого нет.

    Я уже смирился и с его однократной подгонкой через JS при загрузке страницы. Нефиг изменять размер окна после загрузки страницы :) Но полоса прокрутки в IE6 при "короткой" странице ещё бесит.
  • artoodetoo

    Сообщения: 5139 Репутация: N Группа: в ухо

    Spritz 16 сентября 2009 г. 23:52, спустя 13 часов 21 минуту 1 секунду

    Зачем загонять себя в угол? В трюке Раяна Фейта нет отдельного DIV для "центрального блока". Но если объявить background для <DIV class="wrapper">, то будет нужная иллюзия.
    Нет же тебе надо именно рамку чтобы потрахаться с IE6! Костыли JS впендюрил. Пойми, чем сложнее вёрстка, тем легче она косячится когда что-то добавляешь. Не лучше ли успокоиться на простом и работающем?
    ιιlllιlllι унц-унц
  • Timur

    Сообщения: 1068 Репутация: N Группа: Джедаи

    Spritz 18 сентября 2009 г. 10:46, спустя 1 день 10 часов 53 минуты

    Я наконец-то сдал летнюю сессию, поэтому как и обещал:

    Если вкратце — для рамки контентной части используется отдельный пустой блок #border_box. Он спозиционирован абсолютно, относительно блока #page.
    #page растянут на весь документ, #border_box отступает от него на высоту шапки и подвала.
    + подвал прижат способом с отрицательным маргином

    Если подробнее —
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="page">
     <div id="header"></div>
     <div id="border_box"></div>
     <div id="content">
      CSS используется создателями веб-страниц для задания цветов, шрифтов,
      расположения и других аспектов представления документа. Основной целью
      разработки CSS являлось разделение содержимого (написанного на HTML или
      другом языке разметки) и представления документа (написанного на CSS).
      Это разделение может увеличить доступность документа, предоставить большую
      гибкость и возможность управления его представлением, а также уменьшить
      сложность и повторяемость в структурном содержимом. Кроме того, CSS
      позволяет представлять один и тот же документ в различных стилях или
      методах вывода, таких как экранное представление, печать, чтение голосом
      (специальным голосовым браузером или программой чтения с экрана), или
      при выводе устройствами, использующими Шрифт Брайля.
     </div>
     <div id="footer_clear"></div>
    </div>

    <div id="footer"></div>
    </body>
    </html>

    html,body {
    height:100%; /* страницу по всей высоте окна */
    margin:0;
    padding:0;
    overflow:auto; /* заставляет футер прижиматься при строгом доктайпе */
    }

    body {
    /* без этого отступы у #border_box расчитываются от края окна */
    position:relative;
    }
    #page {
    position:relative; /* для позиционирования #border_box */
    min-height:100%;
    }
    *html #page {
    height:100%; /* ie6 не знает min-height */
    }

    #header {
    background:#cec;
    border:1px solid #090;
    height:50px;
    }

    #border_box {
    position:absolute;
    border:2px solid #f00;
    left:0;
    right:0;

    /* высота (50px) + верхня рамка (1px) + нижняя рамка (1px) подвала */
    bottom:52px;

    /* высота (50px) + верхня рамка (1px) + нижняя рамка (1px) шапки */
    top:52px;
    }
    *html #border_box {
    /*
    * в IE6 не работает автоматический расчет размеров, поэтому придется
    * использовать экспрешины;
    * важно: расчет идет относительно блока #page, а не body (иначе будет
    * расчитываться от размеров окна, что нежелатель)
    */

    /* 4px = толщина левой и правой рамки */
    width:expression(document.getElementById('page').offsetWidth-4);

    /* отступы сверху и снизу и рамка сверху и снизу (52px + 52px + 2px + 2px) */
    height:expression(document.getElementById('page').offsetHeight-108);
    }

    #footer_clear {
    /*
    * чтобы подвал не налезал на контент
    * (высота подвала (50px) + верхняя и нижняя рамка (1px + 1px)
    */
    height:52px;
    }
    #footer {
    background:#cec;
    border:1px solid #090;
    height:50px;
    margin-top:-52px; /* поднимаем подвал на 52px над #page */
    }


    Работает везде. Строгий доктайп при этом необязателен (фактически без него даже можно убрать overflow:auto у html,body, но оно вроде не мешает). Недостаток — несемантично использовать отдельный див только для рамки.

Пожалуйста, авторизуйтесь, чтобы написать комментарий!