要件に基づいて実行する必要がある主なことがあります。
まず、ページの幅全体を使用します
レイアウトをページ全体に表示するには、次のように 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 つのコンテナーが他のコンテナーの上に積み重ねられていることがわかります。デスクトップ ビューでは、フッターが一番下に固定され、必要に応じてメイン コンテンツ用のスクロールバーが表示されます。