Здравствуйте!! Не могу решить вопрос с позиционированием блоков. Проблема - прячется футер за блок с абслютным позиционированием. Если этому блоку назначить высоту в 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;
}
position: relative
на все неabsolute
элементы, а потом играться сz-index
.