Zurb 4 separately scrollable sections

Question

I have a full screen layout based on an answer to a previously asked question:

CSS fullscreen grid layout (with some scrolling sections)

Wireframe I'm using:

Edit: This is a very similar layout behavior I'm looking to recreate in Zurb 4 (widths and heights don't need to be fixed though): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Works great, however I am now attempting to model the same/similar layout in Zurb Foundation 4 but having trouble with two things:

1. It's unclear how I might have B and E scroll vertically and independently (think Mail.app layout on a Mac)

2. It's unclear how I might have C and F fixed to the bottom of the screen.

Unlike my previous question, I do not plan to have fixed pixel widths for these sections.

Note: I believe in mobile-first design, but I don't see why any of this would not be considered 'responsive'. I do plan to resize and show/hide sections depending on the device and orientation. But scrolling and full-height sections seem to be missing from Zurb.

Answer 1

There main things that needed to be done based on your requirement:

First, use the page's entire width

You want the layout to fill the entire page and to do that you need to override a Foundation class like this:

.row {
  max-width: 100%;
}

Second, stick the footer to the bottom so you can have a scroll bar for B and E. Here's a sticky CSS that I modified to get it working with a Foundation template.

html, body, #wrapper{ height: 100%; }
body > #wrapper{height: auto; min-height: 100%;}
#main { padding-bottom: 75px; /*  same height as the footer */
    overflow:hidden;
    top: 75px; bottom: 0; left: 0; right: 0;        
    padding-bottom: 75px;    
    position: absolute;           
}  
#footer { 
    position: relative;
    margin-top: -75px; /* negative value of footer height */
    height: 75px;
    clear:both;
} 

.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}

The key are the four container divs: wrap, header, main and footer. I assume that your header will have a fixed height as it could be a banner or menu so you can add the class on the following code (see third point).

Third, let the middle DIVs stretch so they have scroll bars for long content

#header {
   height:75px; // your desired height
}  
// additional style for the "main" class
#main {
   top: 75px; bottom: 0; left: 0; right: 0; // top is the same as header.height
}
// this will create a scroll bar on section B
#main .b {
    overflow:auto;
    height:100%; 
}
// this will create a scroll bar on section E
#main .e {
    overflow:auto;            
    height:100%;
}

Take note though that while sections B and E will be responsive in that they will stack over one another, the height will be fixed, and I think you expect that to happen as you want a scroll bar on each of them.

As you've mentioned in your comment that my previous code is not working and that is because if you view it on a mobile device you have a small area to work with. The smaller the device gets the less real state you have. What you need to do is to decide at what point you would NOT want to scroll your main content (sections B and E).

It's not a good idea that you let your users scroll certain parts of your site. Then let them have a hard time scrolling to the rest of the sections (rest of the page) only to have them scroll again in other section. And that is before they reach the bottom of the page. So what you need to based on that suggestion is:

@media only screen and (max-width: 768px) {
    #main {                
        padding-bottom: 0;
        position:inherit
    }  
    #footer {                 
        margin-top: 0;                
    } 
    #main .b {
        overflow:auto;
        height:auto; 
    }
    #main .e {
        overflow:auto;            
        height:auto;
    }
}

See it in action here. You will see there that on smaller devices, the footer will stick to the bottom with the two container stacked on top of the other. On a desktop view, the footer will stick right to the bottom and you will have scrollbars for the main content, if necessary.