Problems setting div height to 100% of parent value

[ruby76]

Hi all, I’m trying to style kind of an existing structure built by a WordPress theme (using the Visual Composer design plugin to design pages). It basically builds rows and columns for me, and I’d like the columns within each row to all be 100% height/equal to the parent row’s height. This seems so simple and somehow I’m not able to do it. The “shorter” div just stays that way, even if I set the height to 100%.

I’ve read up online a bit and tried setting all of the divs to float, but that seems to be a problem within this overall structure (it just makes the entire row disappear). Are there any other tricks to this? I feel like I must be missing something fairly simple that just isn’t occurring to me.

The HTML/CSS code is kind of long and messy to post a CodePen link but I can do that as well if the concept isn’t as simple as I’m hoping it is. If it helps, the site I’m having trouble with is here: http://www.easthowesteps.com/new/v4/ (The problem starts to appear as I shrink the size of my browser window.)

Thanks for any help!

[Alex Zaworski]

You can accomplish this with flexbox, depending on your browser support requirements.

Here’s the gist of how it’d look:

.parent {
  display: flex;
}

.small-col  {
  flex-basis: 33%
}

.big-col {
  flex-basis: 66%
}

Note that you won’t need float, width, or height declarations anymore.

display:table is another option but it’s a lot more verbose.

[ruby76]

This worked great – thanks so much for your help! I’ve used the display: table concept before but was worried it would break the responsive functionality. This method does make the smaller column somehow disappear on more mobile-sized resolutions (part of the bummer of trying to edit someone else’s WP themes), but I think I can make that work.

Thanks again!

[Alex Zaworski]

Happy to help! If you want to have the columns collapse on smaller screens, the cleanest way I know is to just add flex-direction: column to the parent via a media query. You don’t even need to worry about the width on the children— they’ll sort themselves out :)

[ruby76]

Awesome! Thanks again. :)

[Author]

Posts