CODEWITHSUNDEEP
htmlcssflexboxzurb-foundation
Lhaer
Lhaer

Reputation: 275

Make Column fill the available height using Foundation Flex Grid

I'm trying to code a page layout that roughly looks like this CodePen, I have the main container that needs to fill the entire browser screen (100% height), and two child div elements of 12 columns.

The first column has a fixed height, and I need the second one to fill the rest of the vertical space available in the container. However when I set the height of the second column to 100%, instead taking the remaining height of the container, it just gets 100% of the height of the parent container and ends up with the same height as the parent container. Is there a way to make the second column simply fill the remaining vertical space left?

EDIT: The height of the first column is not actually fixed, it may vary.

Upvotes: 0

Views: 1276

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372059

If the parent container is height: 100%, and there is a child element with height: 100px...

When you give the other child height: 100%, it will overflow the container because it's sibling has already consumed 100px.

In other words:

100% + 100px > 100%

Instead of this:

.box-two {
  background: red;
  height: 100%;
}

Try this:

.box-two {
  background: red;
  height: calc(100% - 100px);
}

Upvotes: 1

Related Questions