web-dev-qa-db-fra.com

Materialise CSS - Pied de page collant

J'ai suivi les étapes mentionnées ici - http://materializecss.com/footer.html - pour créer un pied collant, mais les résultats ne sont pas ceux attendus.

Je copie le code suivant dans le fichier materialize.min.css:

  body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  main {
    flex: 1 0 auto;
  }
cssmaterial-designmaterialize
22
xennygrimmato

Vous n'utilisez probablement pas la balise <main>

Remarque: Nous utilisons flexbox pour structurer notre code HTML de sorte que le pied de page soit toujours au bas de la page. Il est important de garder le structure de votre page dans les 3 balises HTML5: <header>, <main>, <footer>

47
Kenneth De Win

Si vous regardez la source de la page d'exemple, vous pouvez voir comment ils s'y prennent: http://materializecss.com/footer.html

Structurez votre code HTML comme dans l'exemple ci-dessous:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>
4
JP_

ajoutez simplement le (#) avant le (principal).

body {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }

  #main {
    flex: 1 0 auto;
  }
3
Shakour Ghafarzoy

Materialise CSS nécessite une structure:

<body>
    <header></header>
    <main></main>
    <footer></footer>
</body>

être préservé. 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;
}
3
Vadim Aidlin

Pour ceux qui utilisent Ember.js (v2.14): Vous devrez modifier un peu les instructions.

Si votre application/template/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;
}
1
DataDino

Si vous utilisez ce pied de page sous Composant angulaire, vos balises <header> <main> <footer> sont probablement entourées par une 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;
}
1
Samet Baskıcı

Mettez une couleur de fond à la fois sur le corps et sur les principaux sélecteurs dans le fichier css et examinez les deux éléments. Si l'un d'entre eux n'a pas changé de couleur, cela pourrait être un problème dans le fichier CSS qui l'a précédé - c'est-à-dire. vérifiez les styles au-dessus.

0
James