zurb-foundation - 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 中对相同/相似的布局进行建模，但遇到了两件事:

不清楚我如何让 B 和 E 垂直独立滚动(想想 Mac 上的 Mail.app 布局)

目前还不清楚我如何将 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拉伸(stretch)所以他们有长内容的滚动条

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