w3school - Descargue el pie de página en la parte inferior de la página en bootstrap 4
table bootstrap 4 w3 (1)
Estoy usando bootstrap 4
Tengo mi estructura de plantilla como esta
<div id="app">
<div id="content">
<nav id="content-header">
...code here...
</nav>
<main id="content-main">
...code here...
</main>
<div id="footer">
...code here...
</div>
</div>
</div>
Sin embargo, el pie de página no se descarga al fondo como se esperaba. (No estoy buscando un pie de página pegajoso). Cómo enviar el pie de página hacia abajo con el código que estoy usando.
Hace unas semanas leí un artículo que necesitamos usar id = "content" y content-header content footerer para bootstrap para que esto funcione. He perdido el enlace del artículo, por lo tanto, publicar una pregunta aquí.
Cualquier ayuda es apreciada
id
ni
.content-header
o
.content-footer
.
Hay un par de maneras en que puedes lograrlo. Quiero mostrarles a dos de ellos.
Flexionar
-
Use la clase
h-100para todos los padres de la#contentincluyendohtmlybody. -
Use las clases
d-flex,flex-columnyh-100para la#content. -
Usa
flex-grow-1para el contenidomain.
Debería usar boostrap versión 4.1 o superior porque la versión inferior no tiene
flex-grow-1
.
Ver esta pluma Te recomiendo agregar y eliminar textos para que veas que funciona.
https://codepen.io/anon/pen/bKEjLR
min-height: calc (100vh - (cabecera + altura del pie de página));
Hemos utilizado este, porque algunos navegadores muy antiguos no son compatibles con
flex
box.
Compruebe la compatibilidad del navegador para
flex
.
-
Encuentra la suma de la altura del pie de página y el encabezado, supongamos que es de
120px -
Establezca
min-heightdemaina calc (100vh - 120px);
main {
min-height: calc(100vh - 120px);
}
Ver esta pluma https://codepen.io/anon/pen/bKExLm
Visita estas páginas para conocer los otros métodos.