Stretch elements (s1, content, s2) over the full height of .main

A week ago I switched to the Hueman theme. Currently I am developing my child theme. The theme is absolutely amazing, but I do have a problem at the moment.

I use the three column layout with a custom background. My idea is to make the two sidebars a little bit transparent to distinguish the sidebars from the main content. The problem is that the three elements (.s1, .content, .s2) don’t stretch over the full height of .main. One element is always bigger than the other two elements and this creates a very ugly effect.

See this screenshot: SCREENSHOT.

I need a CSS solutions to stretch the three elements, so they occupy the entire height of .main.

I tried a few methods with tables, relative-absolute positioning, the flex option, but they all break the responsiveness of the theme. Help will be much appreciated.