/ / Zurb 4 separat scrollbare Abschnitte - zurb-foundation

Zurb 4 separat scrollbare Abschnitte - zurb-foundation

Ich habe ein Vollbild-Layout basierend auf einer Antwort auf eine zuvor gestellte Frage:

CSS-Vollbild-Grid-Layout (mit einigen Bildlaufbereichen)

Wireframe Ich verwende:

Bildbeschreibung hier eingeben

Edit: Dies ist ein sehr ähnliches Layout-Verhalten, das ich in Zurb 4 zu erstellen suche (Breiten und Höhen müssen jedoch nicht korrigiert werden): http://stevesanderson.github.com/fixed-height-layouts-demo/pane-transitions-tablet.html

Funktioniert großartig, aber ich versuche jetzt, das gleiche / ähnliche Layout in Zurb Foundation 4 zu modellieren, habe aber Probleme mit zwei Dingen:

  1. Es ist unklar, wie ich B und E vertikal und unabhängig scrollen lassen könnte (denke Mail.app Layout auf einem Mac)

  2. Es ist unklar, wie ich C und F am unteren Bildschirmrand fixieren könnte.

Anders als bei meiner vorherigen Frage habe ich nicht vor, Pixelbreiten für diese Abschnitte festzulegen.

Hinweis: Ich glaube an das Mobile-First-Design, aber ich verstehe nicht, warum das nicht als "reaktionsschnell" angesehen wird. Ich plane die Größe zu ändern und Abschnitte je nach Gerät und Ausrichtung anzuzeigen / auszublenden. Scrollen und volle Höhenabschnitte scheinen in Zurb jedoch nicht vorhanden zu sein.

Antworten:

5 für die Antwort № 1

Es gibt die wichtigsten Dinge, die auf der Grundlage Ihrer Anforderungen erledigt werden müssen:

Verwenden Sie zuerst die gesamte Breite der Seite

Sie möchten, dass das Layout die gesamte Seite ausfüllt und dass Sie eine Foundation-Klasse wie folgt überschreiben müssen:

.row {
max-width: 100%;
}

Zweitens, kleben Sie die Fußzeile auf den Boden So können Sie eine Bildlaufleiste für B und E. Hier ist ein klebriges CSS, das ich geändert habe, damit es mit einer Foundation-Vorlage funktioniert.

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;}

Der Schlüssel sind die vier Container-Divs: Wrap, Header, Haupt- und Fußzeile. Ich nehme an, dass Ihre Kopfzeile eine feste Höhe hat, da es sich um ein Banner oder Menü handeln könnte, so dass Sie die Klasse für den folgenden Code hinzufügen können (siehe dritten Punkt).

Drittens, lass die mittleren DIVs strecken Daher haben sie Bildlaufleisten für lange Inhalte

#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%;
}

Beachten Sie jedoch, dass während Abschnitte B und E reagieren darauf, dass sie übereinander gestapelt werden, die Höhe wird festgelegt, und ich denke, dass Sie das erwarten, da Sie eine Bildlaufleiste auf jedem von ihnen haben möchten.

Wie Sie in Ihrem Kommentar erwähnt haben, dass meineDer vorherige Code funktioniert nicht und das liegt daran, dass Sie einen kleinen Bereich zum Arbeiten haben, wenn Sie ihn auf einem mobilen Gerät anzeigen. Je kleiner das Gerät wird, desto weniger reale Zustände haben Sie. Was Sie tun müssen, ist zu entscheiden An diesem Punkt möchten Sie NICHT Ihren Hauptinhalt scrollen (Abschnitte B und E).

Es ist keine gute Idee, dass Sie Ihre Nutzer zulassenScrollen Sie bestimmte Teile Ihrer Website. Dann sollte es ihnen schwer fallen, zu den restlichen Abschnitten (Rest der Seite) zu scrollen, um sie dann in einem anderen Abschnitt erneut scrollen zu lassen. Und das, bevor sie den unteren Rand der Seite erreichen. Was Sie brauchen, um sich auf diesen Vorschlag zu stützen, ist:

@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;
}
}

Sehen Sie es hier in Aktion. Sie werden dort sehen, dass auf kleineren Geräten, dieFußzeile wird mit den zwei übereinander gestapelten Containern auf dem Boden bleiben. In einer Desktop-Ansicht wird die Fußzeile ganz unten angezeigt und Sie haben ggf. Bildlaufleisten für den Hauptinhalt.


Verwandte Fragen


Kommentare (0)

Einen Kommentar hinzufügen