Menu icon Foundation
grid-x 100% height

Hello.

What is the best method to make either a grid-x wrapper or the surrounding grid-container stretch to 100% height?

I initially setup an outer grid frame wrapper that enclosed my grid-x elements, but then ran into the overflow of the content within the grid-x elements overflowing past the bottom of the page.

xy gridheight

Hello.

What is the best method to make either a grid-x wrapper or the surrounding grid-container stretch to 100% height?

I initially setup an outer grid frame wrapper that enclosed my grid-x elements, but then ran into the overflow of the content within the grid-x elements overflowing past the bottom of the page.

Gregor Agnes almost 2 years ago

Maybe try: min-height: 100vh;

Erik Oberhausen almost 2 years ago

Thank Gregor.

This is old now, but finally figured out to use the flexbox helper classes they provide:

http://foundation.zurb.com/sites/docs/flexbox-utilities.html

 

<div class="grid-x grid-padding-x">
    <div class="cell small-3 align-self-bottom"><div class="demo">Align bottom</div></div>
    <div class="cell small-3 align-self-middle"><div class="demo">Align middle</div></div>
    <div class="cell small-3 align-self-stretch"><div class="demo">Align stretch</div></div>
    <div class="cell small-3 align-self-top"><div class="demo">Align top. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non harum laborum cum voluptate vel, eius adipisci similique dignissimos nobis at excepturi incidunt fugit molestiae quaerat, consequuntur porro temporibus. Nisi, ex?</div></div>
</div>

 

 

Jonny Wood over 1 year ago

I was having the same issue of using .grid-frame and the content being hidden on smaller screens. I found a little bit of jQuery to be the best solution for my circumstances. 

I had nested grid elements in the grid-frame centered vertically (and horizontally on larger screens).

Markup:

<header id="hero" class="grid-y grid-frame">

	<div id="page-head" class="cell shrink grid-x align-justify">
		<div class="cell medium-6">
			<!-- cell content -->
		</div>
		<div class="cell small-12 medium-6">
			<!-- cell content -->
		</div>
	</div>
			 
	<div class="hero-message cell auto cell-block-container align-center">
		<div class="grid-x align-center">
			<div class="grid-content cell small-12 xxlarge-10 wide-9">

				<!-- cell content -->

			</div>
		</div>
	</div>

</header>

jQuery:

var 
  grid_frame =  $(".grid-frame"),
  grid_content = $(".grid-frame .grid-content"),
  offset = $("#page-head");

grid_frame.css("min-height", function() {
    return grid_content.outerHeight() + offset.outerHeight();
});

 Hope this helps anyone else with similar issues :)

 

Update

I was still having issues with the grid-content element shrinking too much and hiding content on mobile devices so I needed to give that a min-height via jQuery too:

grid_content.css("min-height", function() {
        return $(this).height();
    });

May be overkill, but it works ;P