Всем доброго времени.
В общем, есть 2 вкладки, реализованных с помощью section и :ckecked. На компьютере все прекрасно работает. Но вот есть проблема на мобильных устройствах:
Высота первой вкладки ~4 000px, высота второй - 1 200px. Получается так, что, переключившись на вторую вкладку, появляется огромная пустота под ней, которая скролится. На скрине (
f3.s.qip.ru/jjb2KJW0.png ) отметил красной стрелкой конец и . Весь голубой фон идущий далее - пустота в несколько экранов.
Подскажите, в чем может быть проблема и что я делаю не так.
HTML:<section>
<input id="tab1" type="radio" name="tab2" checked="checked">
<input id="tab2" type="radio" name="tab2">
<div class="tabs_cont">
<div id="tabc1">
вкладка 1
</div>
<div id="tabc2">
вкладка 2
</div>
</div>
<label for="tab1">Переключашка 1</label>
<label for="tab2">Переключашка 2</label>
</section>
CSS:section {
position: relative;
input {
position: absolute;
left: -9999px;
}
.tabs_cont {
position: relative;
z-index: 2;
padding: 0;
width: 100%;
}
.tabs_cont > div {
position: absolute;
left: -9999px;
top: 0;
opacity: 0;
}
#tab1:checked ~ .tabs_cont #tabc1,
#tab2:checked ~ .tabs_cont #tabc2 {
position: static;
left: 0;
opacity: 1;
}
}
Больше кода нет. Вся страница состоит только из этих двух вкладок body > section > div#tab*2 > контент простыней.
Средний
