/ / Zurb 4別々にスクロール可能なセクション - zurb-foundation

Zurb 4個別にスクロール可能なセクション - zurb-foundation

私は以前に尋ねられた質問に対する答えに基づいたフルスクリーンレイアウトを持っています。

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にはないようです。

回答:

回答№1は5

あなたの要求に基づいてなされる必要がある主なものがあります:

まず、ページ全体の幅を使う

あなたはレイアウトがページ全体を埋めるようにしたい、そしてあなたがこのような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点目を見てください)。

第三に、中央の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つのコンテナーが他のコンテナーの上に積み重ねられた状態で下に固定されます。デスクトップビューでは、必要に応じてフッターが一番下に固定され、メインコンテンツのスクロールバーが表示されます。


関連する質問


コメント(0)

コメントを追加