Как вам такое решение фиксированного сайдбара?

Question

[smithana]

Всем привет

Существовал сайт со следующим расположением элементов
====header====
content sidebar
====footer====

sidebar фиксирован по ширине, content с резиновой шириной. Оба display table-cell.

Всё замечательно работало, пока заказчикам не захотелось сделать сайдбар прилипающим к нижнему краю экрана при прокрутке нижнего края экрана ниже сайдбара.

Тут я и узнал, что display: table-cell сильно не дружат с position: fixed.

Для решения этой проблемы в голове появилось 3 варианта:
1. Обоим назначить display: inline-block, сайдбару фиксированную ширину, контенту calc(100% - 250px)
2. Родителю display: flex, сайдбару фиксированную ширину
3. Контенту margin-right: 250px; сайдбару position: absolute

Начал с последнего варианта. Реализовался без проблем. Но какой-то он не стандартный, что настораживает.
Что вы можете сказать о таком варианте?
https://jsfiddle.net/r2zLvoor/

Спасибо.

Comments

[Сергей Тутуков]

тебе проще при событии scroll добавлять padding-top сайдбару, когда это нужно

[Сергей Тутуков]

Пример:
https://ria.ru/world/20171005/1506244671.html
.l-right-column

[smithana]

Сергей Тутуков, Идея не плохая, но сразу вижу один минус. В моём решении сайдбар при скролле дёргается только 1 раз, когда position absolute меняется на position fixed.

В предложенном вами варианте, он дёргается каждый раз, когда ему добавляется паддинг.

Answer 1

[smithana]

нашёл первый косяк данного решения. Когда сайбар больше по высоте, чем основная часть, то он наползает на футер. Думаю, что исправить это можно только с помощью js, и при загрузке проверять, если высота сайдбара больше высоты основной части, то основной части назначать высоту сайдбара. Минус - если у пользователя не работает js, то всё будет выглядеть очень плохо.

Попробовал вариант, предложенный выше - добавлять паддинг. Хотел убрать дёрганье с помощью св-ва transition, но образовалась гораздо более серьёзная проблема. Паддинг добавляется бесконечно, т.к. вместе с увеличением высоты сайдбара увеличивается и высота всего сайта.