Menu icon Foundation
2 x Grid-blocks, each using full height AND width of grid-frame?

I have a grid-frame, with 2 x grid-blocks in the inside.

Like so:

<div class="grid-frame ">
    <div class="vertical grid-block ">
        
        <div class="grid-block">
            <canvas style="width: 100%; height: auto;"></canvas>
        </div>
        
        <div class="grid-block">
            // other content
        </div>
        
    </div>
</div>

Screen shot 2015 01 26 at 12.13.09 pm

The above code will split the screen into 2 even verticals bits, but what I want is for each grid-block to use 100% height of the grid-frame, so on initial load, the first grid-block is taking up the full screen, then scrolling down, the second grid-block becomes visible. i.e. the 2nd grid-block is off screen.

How is something simple like this achieved?

In a typical desktop browser, it can be achieved by doing 2 x grid-frames ,e.g.:

<div class="grid-frame">
    <canvas style="width: 100%; height: auto;"></canvas>
</div>
<div class="grid-frame">
    <div class="grid-block">
        // other content
    </div>
</div>        

         

This is actually pretty cool that it works this way, even though I don't think it's best practice and on my mobiles browser it only will show the first grid-frame, as I think that is the spec that there is only 1 grid-frame which takes up the full view.

Anyways, how does one do this?

grid-framegrid-blockfull heightfa

I have a grid-frame, with 2 x grid-blocks in the inside.

Like so:

<div class="grid-frame ">
    <div class="vertical grid-block ">
        
        <div class="grid-block">
            <canvas style="width: 100%; height: auto;"></canvas>
        </div>
        
        <div class="grid-block">
            // other content
        </div>
        
    </div>
</div>

Screen shot 2015 01 26 at 12.13.09 pm

The above code will split the screen into 2 even verticals bits, but what I want is for each grid-block to use 100% height of the grid-frame, so on initial load, the first grid-block is taking up the full screen, then scrolling down, the second grid-block becomes visible. i.e. the 2nd grid-block is off screen.

How is something simple like this achieved?

In a typical desktop browser, it can be achieved by doing 2 x grid-frames ,e.g.:

<div class="grid-frame">
    <canvas style="width: 100%; height: auto;"></canvas>
</div>
<div class="grid-frame">
    <div class="grid-block">
        // other content
    </div>
</div>        

         

This is actually pretty cool that it works this way, even though I don't think it's best practice and on my mobiles browser it only will show the first grid-frame, as I think that is the spec that there is only 1 grid-frame which takes up the full view.

Anyways, how does one do this?

Rafi Benkual about 4 years ago

We did it on this template http://foundation.zurb.com/apps/app-templates/travel/#!/

Like this:

<div class="grid-frame vertical">
      <div class="grid-block shrink wrap">
        <div class="grid-content collapse small-12 medium-6">
          <ul class="menu-bar dark">
            <li><a href="#">zTravel</a></li>
          </ul>
        </div>
        <div class="grid-content collapse small-12 medium-6">
          <ul class="menu-bar dark">
            <li ui-sref-active="is-active"><a ui-sref="listings">Listings</a></li>
            <li ui-sref-active="is-active"><a ui-sref="photos">Photos</a></li>
            <li ui-sref-active="is-active" ><a ui-sref="reviews">Reviews</a></li>
          </ul>
        </div>
      </div>

Robert North about 4 years ago

Sorry, I must have explained it poorly. That is a great example though. I updated the title of the post.

I am trying to achieve a grid-block taking up the whole screen size. Meanwhile off screen, there is another grid-block, which is also the size of the screen. The second grid-block only comes into view after you have scrolled.

So if you put in just one grid-block, it automatically fills the full width and height of the screen. If you put in a second grid-block, by default, the screen will be split by those 2 grid-blocks, each grid-block taking half the screen. That is really awesome default functionality, but I'm trying to see if it is possible to achieve kind of the opposite, where the grids are just stacked, each one taking up the full screen size.

Robert North about 4 years ago

Bump the casbah. Any ideas?