Tengo una aplicación React con un diseño básico:
function App() { return ( <div className="app"> <Header /> <Main /> <Footer /> </div> ); } export default App;Mi problema es que tengo hojas de estilo separadas para cada uno de estos componentes, pero no puedo hacer que mi pie de página esté en la parte inferior de la página y siempre permanezca debajo del contenido. Es decir, si la página está en blanco, el pie de página aún estaría en la parte inferior, y si hubiera contenido que fuera más grande que la altura de la ventana gráfica, el pie de página aún permanecería debajo.
He visto respuestas a este problema, pero solo con páginas HTML regulares, no con diferentes componentes de React con diferentes hojas de estilo. Tengo index.css , App.css y CSS para cada uno de los componentes de mi aplicación.
¿Hay alguna manera en que deba hacerlo? ¿Qué hoja de estilo debo agregar el código para que el pie de página permanezca en la parte inferior y debajo del contenido? Actualmente tengo un código en mi Footer.css , pero el código no mantiene el pie de página en la parte inferior de la página y debajo del contenido.
Creo que el problema es que, por lo general, todos los componentes están en la misma página HTML dentro del body , pero React se divide de manera un poco diferente. Cualquier ayuda sería genial.
Necesita agregar estilo al contenedor global:
html,body,#root { display: flex; flex-direction: column; min-height: 100%; }luego agregue estilo a su componente de pie de página:
.footer { padding-top: auto; }No recomendaré usar
min-height: 100vh;se romperá en el móvil, debido a cómo se calcula.
En index.css agregue esto:
Footer { width: 300px; text-align: center; position: relative; bottom: 0; left: 50%; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); }Ejemplo: https://codesandbox.io/embed/quirky-sound-bitt9k?fontsize=14&hidenavigation=1&theme=dark
Puede cambiar position: fixed; si desea que la sección de pie de página se muestre en la parte inferior de la página en relación con la ventana gráfica, en lugar de en relación con el contenido de la página.
Fuentes para su referencia:
https://getridbug.com/html/transform-translate-50-50/ https://www.w3schools.com/css/css_positioning.asp
Estaba teniendo un problema al usar grid y grid-template-rows, pero cambiar a flex funcionó.
Tengo entendido que usar una flex-direction: column; y justify-content: space-between; espacia mis tres componentes y fuerza mi <Footer /> debajo de <Main /> sin importar la altura de la ventana gráfica.
Si alguien tiene una mejor comprensión de por qué mi respuesta funciona mejor que otras, me encantaría una explicación.
archivo index.css:
.app { min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; }