Utilize Foundation Flex Grid to ensure that Column fills the entire height available

Question

Utilize Foundation Flex Grid to ensure that Column fills the entire height available

I am currently working on coding a page layout that resembles the design showcased in this CodePen example. The main container is set to occupy the entire height of the browser screen (100% height), with two child div elements each occupying 12 columns.

The first column has a predetermined height, while I am seeking a solution for the second column to fill the remaining vertical space within the container. Setting the height of the second column to 100% results in it taking up the full height of its parent container rather than adjusting to the available space, leading to the same height as the parent container. Is there a method to ensure that the second column fills the remaining vertical space?

UPDATE: It should be noted that the height of the first column can vary and is not fixed.

html css flexbox zurb-foundation

Answer 1

Answer №1

In the scenario where the parent container has a height: 100%, and one of its child elements has a height: 100px...

If you then assign another child element a height: 100%, it will overflow the container because its sibling has already taken up 100 pixels.

To put it simply:

100% + 100px > 100%

Instead of using this approach:

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

Consider trying this alternative:

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

Answer 2

In the scenario where the parent container has a height: 100%, and one of its child elements has a height: 100px...

If you then assign another child element a height: 100%, it will overflow the container because its sibling has already taken up 100 pixels.

To put it simply:

100% + 100px > 100%

Instead of using this approach:

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

Consider trying this alternative:

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

Utilize Foundation Flex Grid to ensure that Column fills the entire height available

Answer №1

Similar questions

transform input in bootstrap to behave like a hyperlink in text format

Styling Ion-Slides in Ionic 3 with Inline CSS

Navigate to a particular row in jsgrid

The functionality of HTML5 Camera is experiencing issues while being used with Tomcat7

When using Angular with mdbootstrap, the mdb-tabs directive will move to the end if the ngIf condition is true

The hyperlink appears to be malfunctioning with an additional border surrounding it within a pop-up window

HTML Grid of widgets placed on top of content without obstructing it

The Bootstrap 4 Dropdown Menu is positioned on the right side of its parent element

TinyMCE generates HTML code with embedded tags

Enabling users to modify or make changes to an HTML table

Form malfunctioning when utilizing dual submit buttons

Assigning a value using HTML code causes the input to malfunction

Prevent jQuery sortable from dropping into its initial parent

What is the best way to continuously run a re.search for new data?

Using ASP.NET MVC to generate dynamic CSS styles

Dynamically transforming JSON data into an HTML table

The variable $ has not been defined in Jquery framework

The combination of CSS3's 100% height and flexible boxes is resulting in unexpected and erratic

Clearing Up CSS Height Definitions

What steps can I take to add a horizontal scroll bar and view the entirety of my image?