Zurb 4 个可单独滚动的部分

Question

我有一个基于对先前问题的回答的全屏布局：

CSS fullscreen grid layout (with some scrolling sections)

我正在使用的线框：

编辑：这是我希望在 Zurb 4 中重新创建的非常相似的布局行为（虽然不需要固定宽度和高度）： http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

效果很好，但是我现在尝试在 Zurb Foundation 4 中对相同/相似的布局进行建模，但遇到了两件事：

1. 尚不清楚如何让 B 和 E 垂直独立滚动（想想 Mac 上的 Mail.app 布局）

2. 尚不清楚如何将 C 和 F 固定到屏幕底部。

与我之前的问题不同，我不打算为这些部分设置固定的像素宽度。

注意：我相信移动优先设计，但我不明白为什么其中的任何一个都不会被视为“响应式”。我确实计划调整大小并显示/隐藏部分，具体取决于设备和方向。但是 Zurb 似乎缺少滚动和全高部分。

Answer 1

根据您的要求需要做的主要事情：

首先，使用页面的整个宽度

您希望布局填满整个页面，为此您需要重写 Foundation 类，如下所示：

.row {
  max-width: 100%;
}

其次，将页脚粘贴到底部，这样您就可以为B 和E 提供滚动条。 这是一个粘性 CSS，我对其进行了修改以使其与 Foundation 模板一起使用。

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;}

关键是四个容器 div：wrap、header、main 和 footer。我假设您的标题将具有固定的高度，因为它可以是横幅或菜单，因此您可以在以下代码中添加类（参见第三点）。

第三，让中间的 DIV 拉伸，让它们有滚动条来显示长内容

#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%;
}

请注意，虽然 B 和 E 部分会响应，因为它们会相互堆叠，但高度将是固定的，我认为您希望这会发生，因为您希望每个部分都有一个滚动条其中。

正如您在评论中提到的，我之前的代码不起作用，那是因为如果您在移动设备上查看它，您可以使用的区域很小。设备越小，您拥有的真实状态就越少。你需要做的是决定在什么时候你不想滚动你的主要内容（B 和E 部分）。

让您的用户滚动您网站的某些部分并不是一个好主意。然后让他们很难滚动到其余部分（页面的其余部分），只是让他们在其他部分再次滚动。那是在他们到达页面底部之前。因此，根据该建议，您需要做的是：

@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。您会在那里看到，在较小的设备上，页脚将粘在底部，两个容器堆叠在另一个容器的顶部。在桌面视图中，页脚将一直贴在底部，并且如果需要，您将拥有主要内容的滚动条。