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

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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