Sidebar and image content height

Hello people !

Please take a look here

I tried different ways to make the sidebar and the “image content area” always keep the same height ; using blueprint’s sidebar, a two column basic stack and match height… Right now I can’t find a simple working solution… I feel a little bit stupid about that :wink:

The ways I tried can match columns height, but not “content height” (my right image). Right now, my image is a “Impact full hero banner”…

So : if you have an idea to get this, I’d love to hear it :wink:

If you add an Overlay background child stack in Side Bar, the colour of the ‘aside’ content area will match the height of your main content. This colour can of course be white.

This doesn’t solve the question of how any content in your box behaves but it does keep the content area aligned

Yes ; I tried that and it can work when the sidebar is smaller that the right content, but not when it is the contrary (depends of the device…).

And yes ; your point is right about the “total content of the sidebar” behavior : this is the second (and secret !) problem of mine !!! Because, when you let an overlay background behind the sidebar, sometimes the “footer part” is displayed to high in the column… I need something to “dispatch” the content nicely, but I think this is the next step, I’d like to manage my first problem before :wink: Maybe sticky grummage would be the solution for that.

Wow !? Nobody have an idea about that ?

I though I should be something easy to do do, is it not ?..

I’m not familiar with blueprint, but if you can use flexbox, you should be able to accomplish that:

I’m sure that @tav will be able to help.

I’m not seeing an image on the link above. Just a sidebar on the left.

Sidebar columns are always equal height, they are flexbox CSS and so equal height by default so you don’t need match height with them. The trick is to make sure that the background is the same height at the column which just means using the ProStyles Background and Overlay child stacks (make sure that you have ProStyles installed). Background will cover the content are and Overlay will cover the Aside. Since they are Flexbox equal height then they will always both cover regardless of the content length of either.

Here is a project file with two pages, one with more than a screen height of content in the sidebar and one the other way around - more in the content area. Both backgrounds are always the height of the longest column.

Regarding your “footer” content - if you mean the social links in the side bar then just put them into a BluePrint stack and select the checkbox for Auto V Align in flex col sidebar. This will push it to the bottom.

1 Like

@teefers Seems to work for me in Safari and Firefox… ?

@tav Thank you very much ; I’ll work on these informations !

@tav : thank you again, and again, and again…

:wink: