CSS HTML-контент, устанавливаемый на высоте между областями

Вопрос:

Я делаю отзывчивый сайт для мобильного телефона. HTML не следует изменять, но css должен обрабатывать позиционирование элементов, чтобы не влиять на основной сайт.

ИСХОДНАЯ ИНФОРМАЦИЯ

На рабочем столе есть панель навигации, расположенная внизу экрана, с номером контакта под ней, в то время как название сайта и логотип расположены вверху. Для мобильных устройств это неоспоримо, поэтому я разместил панель навигации в верхней части экрана рядом с названием и логотипом. При желании число оставалось внизу. Между верхним заголовком и номером контакта внизу я разместил область массового содержимого. Содержимое отображается корректно, используя свойство height:calc(100% - 336px) для установки обертки содержимого 100% – общей высоты верхнего заголовка и номера контакта. Затем оболочка содержимого устанавливается абсолютной в верхнюю позицию: 176 пикселей для соответствия нижней части верхнего заголовка. Содержимое внутри оболочки содержимого не помещается внутри обертки, поэтому overflow-y:scroll используется, чтобы гарантировать, что пользователь может прокручивать область содержимого.

ПРОБЛЕМА

Область содержимого внутри обертки не прокручивается.

КОД

CSS

.PageContentBox {
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}
#content {
padding: 0;
height: 100%;
overflow-y: scroll; /*This here for testing purposes*/
}

HTML

<div class="PageContentBox">
<div id="content">
<div id="pages">
<div class="page" id="page0">
<h1>HEADER</h1>
<div class="grid grid-pad" style="padding: 0 0 0 0!important">
<div class="row" id="r1">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Applications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r2">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Performance</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
<div class="row" id="r3">
<div class="col-5-12">
<div class="content">
<img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
</div>
</div>
<div class="col-7-12">
<div class="content">
<h2>Specifications</h2>
<p class="MegaServicesText">
DUMMY TEXT
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Ответ №1

Вам нужно установить position на вашем.PageContentBox: top: и z-index не работают, если вы не определяете position.

Здесь вы обновили Fiddle с фиксированным положением.

Ответ №2

В вашем вопросе вы сохраняете уже предоставленное решение, просто используйте это только. Вы указали это абсолютное, но не использовали его в css. Просто используйте его, и не нужно будет ставить #content css. css должно быть следующим:

.PageContentBox {
position: absolute;
top: 176px!important;
height: calc(100% - 336px);
z-index: 12;
width: 100%;
overflow-y: scroll;
left: 0px!important;
}

См. Пример

Я получаю рабочий стол и мобильный вид, как это, и я думаю, что это прекрасно. Что ты говоришь? enter image description here

enter image description here

enter image description here

Оцените статью
TechArks.Ru
Добавить комментарий