un nguyen
Tengo un problema cuando trato de corregir el pie de página en la parte inferior de la página como se muestra a continuación:
Aunque busco en Google y veo muchas sugerencias, sigo enfrentando el problema. Sospecho que este problema es <div data-reactroot></div> no se puede establecer la altura al 100% como sus padres. ¿Alguien podría ayudarme?
¡Gracias por adelantado!
Actualizar: Estilo del pie de página:
borderTop: '1px solid #ddd',
height: '60px',
lineHeight: '60px',
backgroundColor: 'white'
mwoelk
Debe decirle a su pie de página que se coloque en la parte inferior del contenedor circundante:
CSS de pie de página:
position:absolute;
left:0;
bottom:0;
right:0;
Y para el contenedor (el div react-root):
padding-bottom:60px;
Como alternativa (si no necesita admitir IE 8), puede probar este estilo en el div.container :
height: calc(100% - 60px);
-
Eso funciona correctamente. Gracias de nuevo. Por cierto, ¿cómo puedo hacer que el texto ‘Sin resultado’ esté en el centro de la pantalla?
– Un Nguyen
5 oct 2016 a las 14:41
-
Esta solución no es compatible con el desplazamiento, cuando se desplaza, el pie de página se pega a su posición inicial
– Sanchit Bhatnagar
6 de marzo de 2020 a las 16:24
-
Si necesita una solución amigable con el desplazamiento, use position:fixed; para mantenerlo siempre en el fondo. Es posible que también deba agregar un índice z para mantenerlo por encima de otros elementos.
– mwoelk
6 de marzo de 2020 a las 23:45
Ikechukwu Kalu
Para cualquier otra persona, las soluciones anteriores no funcionan, puede intentar los siguientes pasos:
- Dar el padre
divun no estáticopositioncomorelative(recuerde el valor predeterminadopositionesstatic) - Dar el padre div una altura mínima de
100vh; esto le permite ocupar todo el espacio disponible verticalmente - Luego para el pie de página (niño), que debe envolverse en un
divsi no es uno, dale las siguientes propiedades;position: absolute; bottom: 0; width: 100%.
ACTUALIZAR: En algunos casos, establecer el pie de página div position a absolute puede que no funcione. En tal caso, utilice relative en cambio.
Con suerte, los pasos anteriores deberían solucionarlo 🙂
-
Parece que “relativo” solo funciona en páginas más largas que la ventana del navegador y “absoluto” solo funciona en páginas con una altura menor o igual que la ventana del navegador.
– Lerk
29 de octubre de 2019 a las 12:08
-
Sí @Lerk, eso parece
– Ikechukwu Kalu
29 oct 2019 a las 12:31
Es importante tener un envoltorio de contenido y establecer su altura mínima en 100vh:
min-height: 100vh; (100% of the viewport height)
min-height: 100%; (100% of the parent's element height)
Mira aquí está muy bien explicado y funcionó para mí:
https://medium.com/@zerox/mantener-ese-maldito-pie-de-pie-en-la-parte-inferior-c7a921cb9551
Cambiaría el css del pie de página de la siguiente manera:
position: fixed;
left:0;
bottom:0;
right:0;
Es posible tener un position: absolute pero no será compatible con el desplazamiento.
Un truco que creo que a todos les falta aquí es que en React después de html y body element, también hay un div con #raíz que encierra todo el contenido. Por favor, consulte la imagen de abajo.
Por lo tanto, se requiere que la altura sea del 100% de los 3, es decir, html, cuerpo y #raíz.
html, body, #root {
height: 100%;
}
Luego agregue estas propiedades en #root:
#root {
display: flex;
flex-direction: column;
}
Debes preguntarte por qué esta #raíz necesita ser flexible y no el cuerpo. La razón es que es el padre más interno o debería decir el padre más cercano del pie de página.
Ahora, finalmente solo haz esto para el pie de página:
footer: { margin-top: auto }
Lo que hace la línea anterior es empujar el pie de página al final de su padre. Tan simple como eso. Nada lujoso aquí. No es necesario hacer ningún cálculo de altura o cambiar la posición del pie de página.
-
Tuve que cambiarlo de 100% a 100vh pero esto funcionó para mí.
– Lauren
3 de marzo de 2021 a las 2:53
ceckenrode
¿Está tratando de tener un envoltorio para su página para que pueda colocar absolutamente el pie de página en la parte inferior? Si es así, puede crear un nuevo componente con una posición relativa para eso y pasar los otros como elementos secundarios y darle a su pie de página una posición absoluta en la parte inferior.
-
Tuve que cambiarlo de 100% a 100vh pero esto funcionó para mí.
– Lauren
3 de marzo de 2021 a las 2:53
guneetgstar
Ojalá lo leyera antes. Aquí está el fragmento de la respuesta de Ikechuk y tenga en cuenta que ahora el footer también respete el margen (que puede no estar en ninguna otra respuesta anterior):
html, body, div{
height:100%;
width:100%
display:block;
}
footer{
position:absolute;
bottom:0;
display:block;
width:100%
}
hr{
display: block;
unicode-bidi: isolate;
margin-block-start: 0.5em;
margin-block-end: 0.5em;
margin-inline-start: auto;
margin-inline-end: auto;
overflow: hidden;
border-style: inset;
border-width: 1px;
}<html>
<body>
<div style={"margin=5%;"}>
<div style={"position:relative"}>
<footer>
<hr>
I am footer
</footer>
</div>
</div>
</body>
</html>
Asegúrese de configurar su
html, body { height: 100% }– ctrlplusb
4 oct 2016 a las 16:29
Sí estoy seguro
html, body { height: 100% }– Un Nguyen
04/10/2016 a las 16:31
traté de establecer
heighty/omin-heightde<div id="bms-root">es 100% pero obtengo el mismo resultado.– Un Nguyen
4 oct 2016 a las 16:38
¿Cuál es el problema actual del pie de página? ¿Cómo sería un pie de página fijo?
– JuanH
04/10/2016 a las 16:40
Quiero arreglar el pie de página en la parte inferior de la página. Eso significa que el pie de página siempre debe mostrarse en la parte inferior.
– Un Nguyen
4 oct 2016 a las 16:46