css - style - poner pie de pagina al final html
Materializar CSS-Pie de página pegajoso (7)
Materializar CSS requiere estructura:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
para ser preservado Así es como puedes implementarlo con reaccionar:
index.html
<body id="root"></body>
index.js
ReactDOM.render(<App/>, document.getElementById(''root''))
App.js
render() {
return (
[
<header>
...
</header>,
<main>
...
</main>,
<footer>
...
</footer>
]
);
Tenga en cuenta que estamos devolviendo una matriz para representar varios elementos en el mismo nivel.
index.css
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Seguí los pasos mencionados aquí, http://materializecss.com/footer.html , para crear un pie de página adhesivo, pero los resultados no son los esperados
Copié pegado el siguiente código en el archivo materialize.min.css:
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
Para aquellos que usan Ember.js (v2.14): Tendrás que modificar las instrucciones un poco.
Si su aplicación / plantilla / aplicación.hbs se ve así:
<header>
</header>
<main>
{{outlet}}
</main>
<footer>
</footer>
Entonces tu app / styles / app.js debería verse así:
.ember-view {
display: flex;
flex-direction: column;
}
main {
min-height: 100vh;
flex: 1 0 auto;
}
Ponga un color de fondo tanto en el cuerpo como en los selectores principales en el css y observe ambos elementos. Si uno de ellos no ha cambiado de color, podría ser un problema en el css que venía antes, es decir. Compruebe los estilos por encima de él.
Probablemente no estés usando la etiqueta <main>
Nota: utilizamos flexbox para estructurar nuestro html de modo que el pie de página esté siempre en la parte inferior de la página. Es importante mantener la estructura de su página dentro de las 3 etiquetas HTML5:
<header>,<main>,<footer>
Si observa la fuente de la página de ejemplo, puede ver cómo lo están haciendo: http://materializecss.com/footer.html
Estructure su HTML como el siguiente ejemplo:
<body>
<header></header>
<main></main>
<footer></footer>
</body>
Si usa este pie de página bajo el componente Angular, probablemente sus etiquetas <header> <main> <footer> envueltas por la etiqueta <app-root> . En este caso debes especificar tu css como a continuación:
app-root {
display: flex;
min-height: 100vh;
flex-direction: column;
}
main {
flex: 1 0 auto;
}
simplemente agregue el (#) antes del (principal).
body {
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
flex: 1 0 auto;
}