I’ve got a three panel layout and want each column to be the same height. At the moment two of them are taller than the other due to word wrapping. I’ve tried fixing the height in pixels, but that isn’t ideal and is hit and miss.
I tried that, but they all just see to allow the setting of a max/min pixel dimension. I figured there must be something that resizes all columns responsively based on the maximum height of the tallest one. If I’ve missed something and any of those on StackCentral does that do let me know.
How about something like this: use a single column stack as the container, place the ‘fixed-height’ stack inside that, with the button stack at the bottom. See screenshot below.
Sections will do it, including placing the buttons at the bottom using Sections-Fix stacks, as shown in this example
At the moment though, the equal height function in Sections is only available when it is being used in Foundation. If demand were sufficient it could easily be added to work in other themes as well as per the rest of the Sections features.
@tav That example you link to is awesome! That is exactly what I wanted to do, and I suspect lots of other people do too, as that kind of three column layout with buttons at the bottom is very standard.
Problem is I don’t use Foundation at the moment, but once I’ve got this project out of the way I might just take it for a spin and then I’ll be sure to checkout you Sections-Fix too.
The thing that Sections does differently to most, is that content fixed to the bottom does not merely overlay the content of the column or box.
It intelligently pads the other content so that vertical space is optimised without the need for blank space below the main content. It is also fully responsive friendly because of this. Even if the height of the content changes as a result of width changes, the bottom content never overlays but is always visually correct.
@tav Wow! That is seriously clever, and what an amazing demonstration of the capabilities. So useful and so very neat. I am definitely, as soon as I get the time, going to have to check out Foundation so that I can get this.
Thanks, have a look through the main demo site it can do a lot more. Sections does not require Foundation for most of its functionality, but as ever, with themes that limit the width of the content many of the full width behaviour won’t look so good.
Hi, first-time RW and stacks user here. Did the Sections stacks ever add the equal height functions to non-foundation themes? I’ve tried playing around with Sections Pro And Sections Box to get the heights of two columns to match up - while still being responsive, but had no luck. Though not sure if I’m just missing something. I don’t have Foundation and can’t afford it right now, though it does look great. Thanks
