Я пытаюсь разделить контейнер div на две вертикальные части 60%
, 40%
.
мой верхний div (который составляет 60%
) всегда должен быть виден. И мой нижний div (40%
) должен быть прокручиваемым, если элементы превышают его лимит.
Лучшее, что я мог получить, основывается на этом: алгоритм JSFiddle, взятый из этого сообщения. Но после того, как я потратил много времени, я не смог достичь своей цели.
Я приложу изображение для иллюстрации:
Вы можете использовать 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;
}
Ваш 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;
}
Установив фиксированную высоту на контейнере и имея одного ребенка со всеми частями содержимого в качестве своих детей, он заставит прокрутку, когда она переполнится.