Question

我根据之前提出的问题的答案进行全屏布局：

CSS fullscreen grid layout (with some scrolling sections)

线框我正在使用：

enter image description here

编辑：这是一个非常相似的布局行为我想在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

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

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

您希望布局填充整个页面，并且您需要覆盖基础类，如下所示：

.row {
  max-width: 100%;
}

其次，将页脚粘贴到底部，这样您就可以拥有B和E的滚动条。这是一个粘性CSS，我修改了它以使其与基础模板一起使用。

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

Zurb 4可单独滚动部分

1 个答案: