Ich habe die hier genannten Schritte - http://materializecss.com/footer.html - ausgeführt, um einen Sticky Footer zu erstellen, aber die Ergebnisse sind nicht wie erwartet.Materialise CSS - Sticky Footer
Ich klebte kopieren Sie den folgenden Code in die Datei materialize.min.css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Du bist wahrscheinlich nicht mit dem <main> Tag
Hinweis: Wir verwenden Flexbox unsere html zu strukturieren so dass die Fußzeile immer am unteren Rand der Seite ist. Es ist wichtig, die Struktur Ihrer Seite innerhalb der 3 HTML5-Tags zu halten:
<header>,<main>,<footer>
nur den (#) hinzufügen, bevor die (Haupt-).
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
flex: 1 0 auto;
}
Dies würde nur Sinn machen, wenn Sie kein Haupt-Tag verwenden, sondern stattdessen ein Div mit einer '.main'-Klasse, was nicht das ist, was sie empfehlen. – batjko
Setzen Sie eine Hintergrund-Farbe auf Körper und Haupt-Selektoren in CSS und hat einen Blick auf beiden Elementen. Wenn einer von ihnen die Farbe nicht geändert hat, könnte es ein Problem in der CSS sein, die davor kam - dh. Überprüfe die Stile darüber.
Wenn Sie an der Quelle der Beispielseite können Sie sehen, wie sie es tun: http://materializecss.com/footer.html
Struktur Ihre HTML wie im folgenden Beispiel:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Für diejenigen mit Ember. js (v2.14): Sie müssen die Anweisungen ein wenig ändern.
Wenn Ihre App/template/application.hbs wie folgt aussieht:
<header>
</header>
<main>
{{outlet}}
</main>
<footer>
</footer>
dann Ihre app/styles/app.js sollte wie folgt aussehen:
.ember-view {
display: flex;
flex-direction: column;
}
main {
min-height: 100vh;
flex: 1 0 auto;
}
Das hat mein Problem behoben. Ich danke dir sehr! – Cameron
Materialise CSS erfordert Struktur:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
beibehalten werden. Hier ist, wie Sie es umsetzen können mit reagieren:
index.html
<body id="root"></body>
index.js
ReactDOM.render(<App/>, document.getElementById('root'))
App.js
render() {
return (
[
<header>
...
</header>,
<main>
...
</main>,
<footer>
...
</footer>
]
);
Beachten Sie, dass wir ein Array zurückgeben, um mehrere Objekte auf derselben Ebene zu rendern.
Index.css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
* aber die Ergebnisse nicht wie erwartet. * Können Sie das konkretisieren und geben uns eine Demo (eine Fiddle vielleicht)? –
Warum kopierst du nicht identifiziertes CSS in eine minimierte Datei? – ajmajmajma