Full height div

This forum is for all Flare issues related to styles, stylesheets and XML.
Post Reply
lc4466
Propeller Head
Posts: 26
Joined: Tue Jun 18, 2019 10:20 am

Full height div

Post by lc4466 »

Hi all. We have a responsive layout master page that puts the body proxy at roughly 75% and a relationship proxy at 25% so that the relationship proxy becomes a panel on the right (or the bottom on mobile). However, if I give a background color to the relationship proxy, I can see that the box height adjusts to the contents and I can't seem to find a way to make it take up the full vertical space of the page when viewing on desktop. I tried adding height: 100% to the css for that element and even for every single parent element I could find in the output all the way up to html but it didn't seem to make a difference.

Has anyone else been able to accomplish something similar?
lc4466
Propeller Head
Posts: 26
Joined: Tue Jun 18, 2019 10:20 am

Re: Full height div

Post by lc4466 »

Just in case anyone else stumbles on this topic, what eventually worked for me after a LOT of trial and error was to replace Flare's responsive layout with a flexbox instead - that at least kept the two divs the same height (the height of the taller div). Then I added a calculated min-height to my relationship proxy of (100vh - the header height + my footer height in px) and that stretched it correctly on shorter pages. (Be sure to set the min-height back to 0 for mobile though, or you'll get extra space when it wraps to the bottom in smaller views)

I also discovered that the auto-generated div class of "height-container" seemed to get me the most mileage in trying to impact the overall body height - by default it has a calculated min-height of (100vh - the header height in px), but you might play around with that value if you're not getting the right height for your content.
Post Reply