6

根据对先前提出的问题的回答，我有一个全屏布局：

CSS 全屏网格布局（带有一些滚动部分）

我正在使用的线框：

在此处输入图像描述

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

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

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

  2. 目前还不清楚我如何将 C 和 F 固定到屏幕底部。

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

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

4

1 回答 1

6

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

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

您希望布局填满整个页面，为此您需要覆盖这样的 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;
    }
}

在这里查看它的实际应用。您会在那里看到，在较小的设备上，页脚将粘在底部，两个容器堆叠在另一个容器的顶部。在桌面视图中，页脚将贴在底部，如果需要，您将拥有主要内容的滚动条。

于 2013-04-01T01:58:04.733 回答