0

Здравствуйте!! Не могу решить вопрос с позиционированием блоков. Проблема - прячется футер за блок с абслютным позиционированием. Если этому блоку назначить высоту в px - то все ок, но тогда при просмотре в мобильном данный блок становится очень длинным, соответственно заданной высоты не хватает и футер опять таки прячется за этот блок.

Сам блок представляет собой два 5-колоночных списка с двумя перекючающимися лейблами (список городов по алфавиту и список городов по регионам) Его код:

<div style="position:relative;">

<li>
  <input type="radio" checked name="tabs" id="tab1">
  <label for="tab1">По алфавиту</label>
  <div id="tab-content1" class="tab-content animated fadeIn">
    <div class="colonki">
      <p class="bukvitsa">А</p>
      <p>Авеллино‎</p>
      <p>Аверса</p>
      <p>Агридженто</p>
      <p>Алассио‎</p>
      <p>Алессандрия</p>
      <p>Альба</p>
      <p>Альберобелло</p>
      <p>Альгеро‎</p>
      <p>Анкона</p>
      <p>Аоста</p>
      <p>Ареццо</p>
      <p>Арона</p>
      <p>Аричча</p>
      <p>Ассизи</p>
      <p>Асти</p>
      <br></br>

      <p class="bukvitsa">Б</p>
      <p>Бари‎</p>
      <p>Беллуно</p>
      <p>Беневенто</p>
      <p>Бергамо‎</p>
      <p>Болонья‎</p>
      <p>Больцано</p>
      <p>Бордигера</p>
      <p>Браччано</p>
      <p>Брешиа</p>
      <p>Брессаноне</p>
      <p>Бриндизи</p>
      <p>Бьелла</p>
      <br></br>


      <p class="bukvitsa">В</p>
      <p>Варацце</p>
      <p>Венеция</p>
      <p>Вентимилья</p>
      <p>Верона</p>
      <p>Верчелли</p>
      <p>Виареджо</p>
      <p>Вибо-Валентия</p>
      <p>Виджевано</p>
      <p>Витербо</p>
      <p>Виченца‎</p>
      <br></br>

      <p class="bukvitsa">Г</p>
      <p>Генуя</p>
      <p>Гориция</p>
      <p>Гроссето</p>
      <br></br>

      <p class="bukvitsa">К</p>
      <p>Кальяри‎</p>
      <p>Кальтаниссетта</p>
      <p>Кампобассо</p>
      <p>Казерта</p>
      <p>Караваджо</p>
      <p>Карбония-Иглезиас</p>
      <p>Катандзаро‎</p>
      <p>Катания</p>
      <p>Козенца</p>
      <p>Комо</p>
      <p>Корреджо</p>
      <p>Кортина д'Ампеццо</p>
      <p>Кротоне</p>
      <p>Кремона</p>
      <p>Кунео</p>
      <p>Курмайор</p>
      <p>Кьети</p>
      <p>Кьянчано-Терме</p>
      <br></br>

      <p class="bukvitsa">Л</p>
      <p>Л'Акуила</p>
      <p>Лоди</p>
      <p>Лекко</p>
      <p>Лечче</p>
      <p>Ливорно</p>
      <p>Лукка</p>
      <br></br>

      <p class="bukvitsa">М</p>
      <p>Мантуя</p>
      <p>Матера</p>
      <p>Марсала</p>
      <p>Милан</p>
      <p>Модена</p>
      <p>Монтепульчано‎</p>
      <p>Медио-Кампидано</p>
      <p>Мессина</p>
      <br></br>


      <p class="bukvitsa">Н</p>
      <p>Неаполь‎</p>
      <p>Неми</p>
      <p>Нуоро</p>
      <br></br>

      <p class="bukvitsa">О</p>
      <p>Озимо‎</p>
      <p>Ольястра</p>
      <p>Ольбия-Темпьо</p>
      <p>Орвието</p>
      <p>Ортона</p>
      <p>Ористано</p>
      <p>Остия</p>
      <p>Оцьери</p>
      <br></br>

      <p class="bukvitsa">П</p>
      <p>Павия</p>
      <p>Падуя</p>
      <p>Палермо‎</p>
      <p>Парма</p>
      <p>Перуджа‎</p>
      <p>Пескара‎</p>
      <p>Пиза‎</p>
      <p>Пистойя</p>
      <p>Порденоне</p>
      <p>Потенца</p>
      <p>Прато‎</p>
      <p>Пьенца</p>
      <p>Пьяченца</p>
      <br></br>

      <p class="bukvitsa">Р</p>
      <p>Равенна</p>
      <p>Рагуза</p>
      <p>Рапалло</p>
      <p>Ровиго</p>
      <p>Реджо-Калабрия</p>
      <p>Реджо-нель-Эмилия‎</p>
      <p>Рим‎</p>
      <p>Римини</p>
      <br></br>

      <p class="bukvitsa">С</p>
      <p>Савона</p>
      <p>Сассари</p>
      <p>Салерно</p>
      <p>Сан-Ремо‎</p>
      <p>Сиена‎‎</p>
      <p>Сорренто</p>
      <p>Специя</p>
      <p>Сиракуза</p>
      <br></br>

      <p class="bukvitsa">Т</p>
      <p>Терни</p>
      <p>Трапани</p>
      <p>Тренто‎</p>
      <p>Триест‎</p>
      <p>Теранто</p>
      <p>Турин‎</p>
      <br></br>

      <p class="bukvitsa">У</p>
      <p>Урбино‎</p>
      <p>Удине</p>
      <br></br>

      <p class="bukvitsa">Ф</p>
      <p>Фано‎</p>
      <p>Фаэнца</p>
      <p>Феррара‎</p>
      <p>Флоренция‎</p>
      <p>Фоджа‎</p>
      <br></br>

      <p class="bukvitsa">Ч</p>
      <p>Чезена‎</p>
      <p>Чивитавеккья‎</p>

      <p class="bukvitsa">Э</p>
      <p>Энна‎</p>



    </div>
  </div>
</li>
<li>
  <input type="radio" name="tabs" id="tab2">
  <label for="tab2">По регионам</label>
  <div id="tab-content2" class="tab-content animated fadeIn">
    <div class="colonki">

      <p class="bukvitsa">Абруццо</p>
      <p>Кьети</p>
      <p>Л’Аквила</p>
      <p>Пескара</p>

      <br></br>

      <p class="bukvitsa">Апулия</p>
      <p>Бари‎</p>
      <p>Бриндизи</p>
      <p>Фоджа</p>
      <p>Лечче</p>
      <p>Таранто</p>
      <br></br>


      <p class="bukvitsa">Базиликата</p>
      <p>Матера</p>
      <p>Потенца</p>
      <br></br>

      <p class="bukvitsa">Валле-д’Аоста</p>
      <p>Аоста</p>
      <p>Курмайёр</p>
      <br></br>

      <p class="bukvitsa">Венето</p>
      <p>Беллуно</p>
      <p>Падуя</p>
      <p>Ровиго</p>
      <p>Тревизо</p>
      <p>Венеция</p>
      <p>Верона</p>
      <p>Виченца</p>
      <br></br>


      <p class="bukvitsa">Калабрия</p>
      <p>Катандзаро</p>
      <p>Козенца</p>
      <p>Кротоне</p>
      <p>Реджо-Калабрия</p>
      <p>Вибо-Валентия</p>
      <br></br>

      <p class="bukvitsa">Кампания</p>
      <p>Неаполь‎</p>
      <p>Салерно</p>
      <p>Казерта</p>
      <p>Беневенто</p>
      <p>Авеллино</p>
      <br></br>


      <p class="bukvitsa">Лацио</p>
      <p>Рим</p>
      <p>Неми</p>
      <p>Браччано</p>
      <p>Витрбо</p>
      <p>Остия</p>
      <br></br>

      <p class="bukvitsa">Лигурия</p>
      <p>Генуя</p>
      <p>Специя</p>
      <p>Савона</p>
      <br></br>


      <p class="bukvitsa">Ломбардия</p>
      <p>Милан</p>
      <p>Бергамо</p>
      <p>Брешиа</p>
      <p>Комо</p>
      <p>Кремона</p>
      <p>Лекко</p>
      <p>Лоди</p>
      <p>Мантуя</p>
      <p>Павия</p>
      <br></br>

      <p class="bukvitsa">Марке</p>
      <p>Анкона</p>
      <br></br>

      <p class="bukvitsa">Молизе</p>
      <p>Кампобассо</p>
      <br></br>

      <p class="bukvitsa">Пьемонт</p>
      <p>Алессандрия</p>
      <p>Асти</p>
      <p>Бьелла</p>
      <p>Кунео</p>
      <p>Новара</p>
      <p>Верчелли</p>
      <br></br>

      <p class="bukvitsa">Сардиния</p>
      <p>Кальяри</p>
      <p>Карбония-Иглезиас</p>
      <p>Медио-Кампидано</p>
      <p>Нуоро</p>
      <p>Ольястра</p>
      <p>Ольбия-Темпьо</p>
      <p>Ористано</p>
      <p>Сассари</p>

      <br></br>

      <p class="bukvitsa">Сицилия</p>
      <p>Агридженто</p>
      <p>Кальтаниссетта</p>
      <p>Катания</p>
      <p>Энна</p>
      <p>Мессина</p>
      <p>Палермо</p>
      <p>Рагуза</p>
      <p>Сиракуза</p>
      <p>Трапани</p>
      <br></br>

      <p class="bukvitsa">Тоскана</p>
      <p>Ареццо</p>
      <p>Гроссето</p>
      <p>Ливорно</p>
      <p>Лукка</p>
      <p>Пиза</p>
      <p>Пистойя</p>
      <p>Прато</p>
      <p>Сиена</p>
      <p>Флоренция</p>
      <br></br>

      <p class="bukvitsa">Трентино — Альто-Адидже</p>
      <p>Больцано</p>
      <p>Тренто</p>
      <br></br>

      <p class="bukvitsa">Умбрия</p>
      <p>Перуджа‎</p>
      <p>Терни</p>
      <br></br>

      <p class="bukvitsa">Фриули-Венеция-Джулия</p>
      <p>Порденоне</p>
      <p>Триест</p>
      <p>Гориция</p>
      <p>Удине</p>
      <br></br>

      <p class="bukvitsa">Эмилия-Романья</p>
      <p>Болонья</p>
      <p>Феррара</p>
      <p>Модена</p>
      <p>Парма</p>
      <p>Пьяченца</p>
      <p>Равенна</p>
      <p>Реджо-нель-Эмилия</p>
      <p>Римини</p>
    </div>
  </div>
</li>

Стили данного блока:

.colonki {
-webkit-column-count: 5;
-moz-column-count: 5;
column-count: 5;
-webkit-column-gap: 20px;
-moz-column-gap: 20px;
column-gap: 20px;
width:80%;
min-width: 400px;
margin:auto;
padding-top:50px;
color: #777;
 }

.tabs input[type=radio] {
      position: absolute;
      top: -9999px;
      left: -9999px;
  }
  .tabs {
    width: 80%;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    margin: 75px auto;
  }
  .tabs li{
    float: left;
  }
  .tabs label {
      display: block;
      padding: 10px 20px;
      border-radius: 2px 2px 0 0;
      color: #08C;
      font-size: 24px;
      font-weight: normal;
      font-family: 'Lily Script One', helveti;
      background: rgba(255,255,255,0.2);
      cursor: pointer;
      position: relative;
      top: 3px;
      -webkit-transition: all 0.2s ease-in-out;
      -moz-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
  }
  .tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
  }

  [id^=tab]:checked + label {
    background: #08C;
    color: white;
    top: 0;
  }
  [id^=tab]:checked ~ [id^=tab-content] {
      display: block;
  }
  .tab-content{
    z-index: 2;
    display: none;
    text-align: left;
    width: 100%;
    line-height: 140%;
    padding-top: 10px;
    background: #f9f9f9;
    padding: 15px;
    position: absolute;
    top: 53px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
  }

Картинка с сайта введите сюда описание изображения

Код футера

    /* =Footer-----------------------------------------------*/
#footerarea {

    margin-bottom: 10px;


}

#footerarea form input,#footerarea form textarea {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    -ms-box-sizing: border-box;

    box-sizing: border-box;

}

#footerarea .widget-wrap {

    border-top: 1px solid #eaeaea;

    padding: 0 2.5%;

}

#footerarea .widget-area {

    padding: 40px 0;

}

#footerarea .widget {

    padding-left: 15px;

    padding-right: 15px;

}
7
  • Хорошо бы рабочий fiddle сделать. Но обычно такие вещи исправляются, если поставить position: relative на все не absolute элементы, а потом играться с z-index.
    – cyadvert
    6 фев 2017 в 17:48
  • не получается исправить ситуацию((
    – Vairanna
    6 фев 2017 в 17:54
  • мое предложение: на футер вешать position: relative относительно меню при вызове меню и так же убирать
    – Mike V.
    6 фев 2017 в 17:56
  • position: relative на футере не меняет ничего(( Что значит относительно меню? Я просто на футер пробовала
    – Vairanna
    6 фев 2017 в 18:01
  • 4
    Возможный дубликат вопроса: Как прижимать footer всегда к низу экрана?
    – user232857
    6 фев 2017 в 18:17

2 ответа 2

0

Данный вопрос уже неоднократно поднимался на Stackoverflow. К примеру, вот один из них: Как всегда прижимать footer к низу экрана?

5
  • на всех остальных страницах с футером нет проблем, он как положено прижат к низу
    – Vairanna
    6 фев 2017 в 18:19
  • @Vairanna потому что поток не очистили. Оберните блоки с float родителем, которому задайте overflow: hidden.
    – user232857
    6 фев 2017 в 18:20
  • как же не очистила? очистила через <div style="clear: both;"></div>
    – Vairanna
    6 фев 2017 в 18:23
  • Поток нужно очищать до закрытия тега и после.
    – user232857
    6 фев 2017 в 18:24
  • div которым я обернула блок с абсолютным позиционированием не имеет высоту((( т.е. он не растягивается на высоту блока-списка
    – Vairanna
    6 фев 2017 в 18:30
0

Проблема в том, что у вас абсолютно спозиционированный блок и он не имеет высоту, потому что он не в потоке документа. Видимо, такому вас на курсах верстки не учили. Поставьте ему фиксированную высоту или переделайте нормально все.

2
  • Вы совершенно правы, у меня абсолютно спозиционированный блок. И высоту не могу ему назначить, поскольку в мобильном криво отражается. На курсах не учили поскольку я самоучка, поэтому и решила обратиться к знающим людям за вопросом: возможно ли относительно абсолютного блока что-либо сделать. Уже поняла, что это невозможно. Переделаю без абсолютного позиционирования, как только дойду мозгом до того, как сделать то, что задумала. А пока блок оставляю без лейблов
    – Vairanna
    7 фев 2017 в 18:17
  • @Vairanna обратите внимание на решение в этой задачи ru.stackoverflow.com/questions/546490/…. Вам подойдет данная структура.
    – user232857
    7 фев 2017 в 19:03

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.