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相同/相似的佈局模型的基礎上4，但有兩件事情煩惱：

1. 目前還不清楚我怎麼可能有B和E滾動垂直和獨立（在Mac上考慮Mail.app佈局）

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

不像我以前的問題，我不打算爲這些部分固定像素寬度。

注：我相信移動優先設計，但我不明白爲什麼這不會被視爲'響應'。我打算根據設備和方向調整大小和顯示/隱藏部分。但滾動和全高部分似乎從Zurb丟失。

Answer 1

有一個需要根據您的需要做的主要事情：

首先，使用頁面的整個寬度

你想要的佈局，填補了整個頁面，並要做到這一點，你需要重寫一個基礎類是這樣的：

.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。您會在那裏看到，在較小的設備上，頁腳將粘在底部，兩個容器堆疊在另一個的頂部。在桌面視圖中，頁腳將直接粘貼到底部，並且必要時您將擁有主內容的滾動條。