6

以前に尋ねられた質問への回答に基づいて、フルスクリーン レイアウトを使用しています。

CSS フルスクリーン グリッド レイアウト (いくつかのスクロール セクションあり)

私が使用しているワイヤーフレーム:

ここに画像の説明を入力

編集: これは、Zurb 4 で再作成しようとしている非常によく似たレイアウト動作です (ただし、幅と高さを修正する必要はありません): http://stevesanderson.github.com/fixed-height-layouts-demo/ pane-transitions-tablet.html

うまく機能しますが、Zurb Foundation 4 で同じ/類似のレイアウトをモデル化しようとしていますが、次の 2 つの点で問題があります。

  1. B と E を垂直に独立してスクロールさせる方法は不明です (Mac の Mail.app レイアウトを考えてみてください)。

  2. C と F を画面の下部に固定する方法が不明です。

以前の質問とは異なり、これらのセクションのピクセル幅を固定する予定はありません。

注:私はモバイル ファーストのデザインを信じていますが、これが「レスポンシブ」と見なされない理由がわかりません。 デバイスと向きに応じて、セクションのサイズ変更と表示/非表示を行う予定です。しかし、Zurb にはスクロールとフルハイトのセクションがないようです。

4

1 に答える 1

6

要件に基づいて実行する必要がある主なことがあります。

まず、ページの幅全体を使用します

レイアウトをページ全体に表示するには、次のように Foundation クラスをオーバーライドする必要があります。

.row {
  max-width: 100%;
}

次に、フッターを下部に貼り付けて、Bとのスクロール バーを表示できるようにしますE。これは、Foundation テンプレートで動作するように修正したスティッキー 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;}

重要なのは、ラップ、ヘッダー、メイン、フッターの 4 つのコンテナー div です。ヘッダーはバナーまたはメニューである可能性があるため、固定の高さになると想定しているため、次のコードにクラスを追加できます (3 番目のポイントを参照)。

3 番目に、中央の 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;
    }
}

実際の動作はこちらでご覧ください。小さいデバイスでは、フッターが下部に固定され、2 つのコンテナーが他のコンテナーの上に積み重ねられていることがわかります。デスクトップ ビューでは、フッターが一番下に固定され、必要に応じてメイン コンテンツ用のスクロールバーが表示されます。

于 2013-04-01T01:58:04.733 に答える