How do you like this fixed sidebar solution?

Question

css

Hello everyone

There was a site with the following arrangement of elements
====header====
content sidebar
====footer====

sidebar is fixed in width, content with rubber width. Both display table-cell.

Everything worked great until the customers wanted to make the sidebar stick to the bottom of the screen when scrolling the bottom of the screen below the sidebar.

Here I found out that display: table-cell is not very friendly with position: fixed.

To solve this problem, 3 options appeared in my head:
1. Assign both display: inline-block, fixed width to the sidebar, calc(100% - 250px) content
2. Parent display: flex, fixed width to the sidebar
3. Content margin-right: 250px; sidebar position: absolute

Started with the last option. Implemented without problems. But some of it is not standard, which is alarming.
What can you say about this option?
https://jsfiddle.net/r2zLvoor/

Thanks.

Answer 1

found the first jamb of this solution. When the saibar is taller than the main body, it crawls onto the footer. I think that this can only be fixed with the help of js, and when loading, check if the height of the sidebar is greater than the height of the main part, then set the height of the sidebar to the main part. Minus - if the user does not have js working, then everything will look very bad.
I tried the option suggested above - add padding. I wanted to remove the twitching with the help of the transition property, but a much more serious problem arose. Padding is added indefinitely, because. As the height of the sidebar increases, so does the height of the entire site.