Макет с двумя рядами - фиксированная верхняя и нижняя прокручиваемая

Question

Макет с двумя рядами - фиксированная верхняя и нижняя прокручиваемая

0

Я пытаюсь разделить контейнер div на две вертикальные части 60%, 40%.

мой верхний div (который составляет 60%) всегда должен быть виден. И мой нижний div (40%) должен быть прокручиваемым, если элементы превышают его лимит.

Лучшее, что я мог получить, основывается на этом: алгоритм JSFiddle, взятый из этого сообщения. Но после того, как я потратил много времени, я не смог достичь своей цели.

Я приложу изображение для иллюстрации:

Popokoko 21 март 2014, в 20:38

Источник

0

Не могли бы вы установить JSFiddle, показывающий ваши ближайшие усилия?
Stuart Kershaw 21 март 2014, в 19:27
1

Я собирался, но @Hashem Qolami решил мою проблему слишком быстро!
Popokoko 21 март 2014, в 19:39

Теги:

html

css

jquery-mobile

2 ответа

0

Ваш HTML должен быть чем-то вроде этого (только для примера):

<div class="ColumnContainer">
    <div class="FixedItem">
        Fixed
    </div>
    <div class="ScrollContainer">
        <div class="ScrollContent">
            <ul>
                <li>item 1</li>
                <li>item 2</li>
                <li>item 3</li>
            </ul>
        </div>
    </div>
</div>

Ключевым моментом здесь является CSS:

.ColumnContainer {
    position:relative;
}

.ScrollContainer {
    position:relative;
    height:200px; /* must set fixed height */
    overflow:auto;
}

Установив фиксированную высоту на контейнере и имея одного ребенка со всеми частями содержимого в качестве своих детей, он заставит прокрутку, когда она переполнится.

Вот пример jsFiddle.

PlantTheIdea 21 март 2014, в 17:19

Ещё вопросы

Не могли бы вы установить JSFiddle, показывающий ваши ближайшие усилия?
Я собирался, но @Hashem Qolami решил мою проблему слишком быстро!

Hashem Qolami · Accepted Answer · 2014-03-21T16-50-00.000Z

Вы можете использовать absolute позиционирование для каждого раздела и использовать свойства top/bottom чтобы правильно позиционировать секции.

В этом случае верхняя часть находится сверху в верхней части страницы top: 0; а значение top собственности #bottom элемента установлен на 60%, где 60% является высота #top элемента. top: 60%; объявление заставляет #bottom располагаться ниже #top.

Также для того, чтобы #bottom был прокручиваемым, вы можете использовать свойство overflow-y или overflow со значением auto для этого элемента.

11.1. Свойства переполнения, переполнения-x и переполнения-y

Эти свойства определяют, является ли контент обрезанным, когда он переполняет область содержимого элемента. overflow-x определяет обрезку в левом и правом краях, overflow-y в верхнем и нижнем краях. overflow является сокращением. Если у него есть одно ключевое слово, он устанавливает для этого ключевого слова как overflow-x и overflow-y.

auto Поведение "auto value" зависит от UA, но для обеспечения переполнения ящиков должен быть предусмотрен механизм прокрутки.

РАБОЧАЯ ДЕМО

#top {
  position: absolute;
  top: 0;
  height: 60%;
  width: 100%;
}

#bottom {
  position: absolute;
  top: 60%;
  bottom: 0;
  width: 100%;
  overflow-y: auto;
}

Спасибо, Вы определенно решили мою проблему! Я тратил последний час с этой ошибкой.