Matérialiser CSS-pied de page collant
J'ai suivi les étapes mentionnées ici - http://materializecss.com/footer.html - pour créer un pied de page collant, mais les résultats ne sont pas comme prévu.
Je copie collé le code suivant à la matérialiser.min.fichier css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
7 réponses
Vous n'utilisez probablement pas la balise <main>
Note: Nous utilisons flexbox pour structurer notre html de sorte que le pied de page soit toujours sur le bas de la page. Il est important de garder la structure de votre page dans les 3 balises HTML5:
<header>,<main>,<footer>
Ajoutez simplement le ( # ) avant le (principal).
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
flex: 1 0 auto;
}
Si vous regardez la source de la page d'exemple, vous pouvez voir comment ils le font: http://materializecss.com/footer.html
Structurez votre HTML comme l'exemple ci-dessous:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Matérialiser CSS nécessite une structure:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
À conserver. Voici comment vous pouvez l'implémenter avec react:
Index.html
<body id="root"></body>
Index.js
ReactDOM.render(<App/>, document.getElementById('root'))
App.js
render() {
return (
[
<header>
...
</header>,
<main>
...
</main>,
<footer>
...
</footer>
]
);
Notez que nous retournons un tableau pour rendre plusieurs éléments au même niveau.
Index.css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Pour ceux qui utilisent Ember.js (v2. 14): Vous devrez modifier un peu les instructions.
Si votre application / Modèle / application.hbs ressemble à ceci:
<header>
</header>
<main>
{{outlet}}
</main>
<footer>
</footer>
Ensuite, votre application / styles / app.js devrait ressembler à ceci:
.ember-view {
display: flex;
flex-direction: column;
}
main {
min-height: 100vh;
flex: 1 0 auto;
}
Mettez une couleur d'arrière-plan sur les sélecteurs body et main dans le css et regardez les deux éléments. Si l'un d'eux n'a pas changé de couleur, cela pourrait être un problème dans le css qui l'a précédé - ie. vérifiez les styles au-dessus d'elle.
Si vous utilisez ce pied de page sous le composant angulaire, probablement vos balises <header> <main> <footer> enveloppées par la balise <app-root>. Dans ce cas, vous devez spécifier votre css comme ci-dessous:
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}