Комплект CSS с двумя столбцами и предметом, прикрепленным к нижней части просмотра ⇐ Html

[Anonymous]

У меня проблемы с достижением определенной макета в CSS. < /p>
Вот основы: < /p>

Есть два столбца, которые я склонен к реализации как сетка. />
Несколько похожих предметов, расположенных вертикально с небольшим пространством между ними. Они должны начать в верхней части своего столбца. < /Li>
Внизу находится еще один элемент. Это должно быть застряло в нижней части видоубийта. Неинтересное. src = "https://i.sstatic.net/f0c8uycv.png"/>
Но это подробности, которые делают его хитрым:

Предмет с нижней частью должен занять собственное пространство. Если есть много элементов с верхним смещением, так что контент левого столбца заполняет товар просмотра, ничего не должно перекрывать что-либо еще. < /Li>
Все содержание следует просмотреть, прокручивая его. Конечно, не должно быть полностью независимой прокрутки каждого столбца. Это никогда не должно быть показано выше, чем это. Никогда не должно быть ситуации, когда мне нужно прокручивать вниз по пустому левому пространству, чтобы увидеть этот элемент с нижним смещением. Это также показывает в некоторых случаях (где стрелки разделяют), где я не особенно не возражаю, какое из двух поведений имеет макет, но где у меня есть предпочтения, они отмечены. Flex, с неявными высотами или 100VH s или Calc S, с и без позиции: Sticky , но я не смог заставить его работать так, как хочу во всех ситуациях. Это действительно кажется, что это должно быть возможно и даже просто. Может быть, я слишком долго смотрел на это. < /P>
Итак, надеюсь, вы сможете сделать лучше меня. Вот отправная точка, с некоторыми элементами управления для легкой регулировки длины каждого столбца. Ничто иное, как эти элементы управления, не позиционируется, так как я не хочу смещаться в сторону определенного пути.

Код: Выделить всё

html,
body {
padding: 0;
margin: 0;
}

.left-column {
background: lightsteelblue;
}

.right-column {
background: lightgreen;
}

.top-biased-item {
background: royalblue;
padding: 1rem;
}

.bottom-biased-item {
background: darkslateblue;
color: white;
padding: 1rem;
}

.content {
background: olivedrab;
padding: 1rem;
margin: 0;
}< /code>




test layout






top-biased item

bottom-biased item


content content content




Items in left column



Items in right column



function setLeft(count) {
const items = Array.from(document.querySelectorAll(".top-biased-item"));
for (const item of items.slice(count)) item.remove();
for (let i = Math.min(count, items.length); i < count; i++)
items[0].before(items[0].cloneNode(true));
}

function setRight(count) {
const items = Array.from(document.querySelectorAll(".content"));
for (const item of items.slice(count)) item.remove();
for (let i = Math.min(count, items.length); i < count; i++)
items[0].before(items[0].cloneNode(true));
}

function changeLeft(event) {
const count = setLeft(+event.currentTarget.value);
}

function changeRight() {
const count = setRight(+event.currentTarget.value);
}

setLeft(+document.getElementById("left-count").value);
setRight(+document.getElementById("right-count").value);

Подробнее здесь: https://stackoverflow.com/questions/797 ... e-viewport