Подвал наезжает на контент

Тема в разделе "Верстка", создана пользователем NikroVir, 8 июл 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Статус темы:
Закрыта.
Модераторы: ultra
  1. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    Есть примерно такой код:
    HTML:
    <body>
        <div id="telo">Контент</div>
        <div id="finish"> </div>
        <div id="footer">Футер<div>
    </body>
    и такой CSS:
    HTML:
    body {
      background: url("/i/bg.jpg") top center repeat-x scroll #ffffff;
      color: #333333;
      font: 14px Tahoma, Geneva, sans-serif;
      margin: 0;
      padding: 0;
      height:100%;
    }
    #telo, #footer {
      position:relative;
    }
    #telo {
      min-height:100%;
      height:auto !important;
      height:100%;
    }
    #telo #finish {
      height:28px;
    }
    #footer {
      margin-top:-32px;
      height:28px;
      position:relative;
    }
    как сделать чтобы футер не наезжал на контент при изменении размера окна?
     
  2. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.037
    Симпатии:
    702
    поменяй
    HTML:
    margin-top:-32px;
    на
    HTML:
     padding-top:-32px;
     
  3. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    хотелось бы сделать так, чтобы подвал был прижат к низу окна браузера, если контента на странице мало...
    у меня так получилось сделать только так как показывал выше
    zzallexx, ваш вариант делает уж очень большой отступ от контента, поэтому он не подходит.
     
  4. zzallexx

    zzallexx

    Регистр.:
    11 июн 2008
    Сообщения:
    1.037
    Симпатии:
    702
    в каком браузере? У меня так смотри спойлер
    [​IMG]
     
  5. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    все браузеры (развёрнутое состояние)
    пример из оперы:
    [​IMG]
    второй вариант - то что было до изменения

    увеличивается отступ, появляется полоса прокрутки, с чем в принципе и пытаюсь бороться =)
     
  6. ShaDeRzz

    ShaDeRzz

    Регистр.:
    16 окт 2007
    Сообщения:
    176
    Симпатии:
    65
    Вы начали правильно но не учли один момент.
    Вам нужно обернуть контент в дополнительный тег, и прописать для него отступ с низу равный той высоте, на которую налазит футер.

    Тоесть что-то типа такого:
    HTML:
    <body>
        <div id="content">
          <div id="telo">Контент</div>
          <div id="finish"> </div>
        </div>
        <div id="footer">Футер<div>
    </body>
    
    css:
    #content {margin-bottom:20px;} /* или padding-bottom */
    20px - параметр из воздуха. Подберите цифру сами
     
    NikroVir нравится это.
  7. NikroVir

    NikroVir Извращённый отшельник

    Регистр.:
    27 апр 2008
    Сообщения:
    325
    Симпатии:
    108
    Вы знаете, помогло. Так же ещё обнаружил ошибку, что один из дивов был не там где надо закрыт)
    Тема закрыта, всем спасибо.
     
Статус темы:
Закрыта.