No muy segura de por qué el pegajoso pie de página no funciona en Bootstrap 4. Tengo un sitio web TYPO3 que soy un principiante en.

La pegajosa pie de página no se peguen en la parte inferior de la página.

Aquí está una copia de la página de origen, como se ha hecho.

Básicamente tengo que copiar el archivo html desde el propio esfuerzo carpeta de documentos y, a continuación, modificado y copiado en mi TYPO3 plantilla.

Si debo llenar la página con el contenido, el pie de página no se pegue – tengo que desplazar la página hacia abajo para ver.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<title>Landing Page</title>
<meta name="generator" content="TYPO3 CMS">

<link rel="stylesheet" type="text/css"
	href="/typo3temp/assets/css/d42b6e1bdf.css?1507853162" media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/bootstrap.min.css?1507860230"
	media="all">
<link rel="stylesheet" type="text/css"
	href="/fileadmin/templates/landing_page/css/sticky-footer.css?1507861966"
	media="all">

<script
	src="/fileadmin/templates/landing_page/js/jquery-3.2.1.min.js?1507862465"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/tether.min.js?1507862602"
	type="text/javascript"></script>
<script
	src="/fileadmin/templates/landing_page/js/bootstrap.min.js?1507854311"
	type="text/javascript"></script>

</head>
<body>
	<div class="container">
		<div class="mt-1">
			<h1>Sticky footer</h1>
		</div>
		<p class="lead">Pin a fixed-height footer to the bottom of the
			viewport in desktop browsers with this custom HTML and CSS.</p>
		<p>
			Use <a href="../sticky-footer-navbar">the sticky footer with a
				fixed navbar</a> if need be, too.
		</p>
		<div class="row">
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
			<div class="col">1 of 3</div>
		</div>
	</div>

	<footer class="footer">
		<div class="container">
			<span class="text-muted">Place sticky footer content here.</span>
		</div>
	</footer>
</body>
</html>

  • Por favor, compruebe que el archivo CSS caminos…
  • Rutas de acceso de archivo son correctos. He comprobado por ir ver código fuente -> a continuación, hacer clic en cada uno para ver si se carga el texto y lo hacen.
  • Cuando yo estoy comprobando en su proporcionó conde fragmento, sin Ningún tipo de estilos aplicados para el contenido HTML.
InformationsquelleAutor Daryn | 2017-10-13

5 Comentarios

  1. 34

    Logrado averiguar. Tal vez tengo un malentendido sobre lo «Pegajoso» o algo así, pero la solución fue cambiar absoluta -> fijos en el archivo css.

    por ejemplo, de:

    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      line-height: 60px; /* Vertically center the text there */
      background-color: #f5f5f5;
    }

    a:

    .footer {
      position: fixed;
      bottom: 0;
      width: 100%;
      /* Set the fixed height of the footer here */
      height: 60px;
      line-height: 60px; /* Vertically center the text there */
      background-color: #f5f5f5;
    }
    • Esta debe ser la respuesta correcta!
    • Sí funciona correcto cuando se utiliza el desplazamiento contenido en Bootstrap 4.1.3
    • Gracias @Daryn solución inteligente!
    • Esta es no un pegajoso pie de página (fija a la parte inferior cuando el contenido es de menos de una página, de lo contrario empujado hacia abajo más allá de contenido hasta que el usuario se desplaza hacia abajo); este se fija a la parte inferior del pie de página (permanece siempre visible sobre el contenido, fija a la parte inferior del navegador durante el desplazamiento)
  2. 24

    El ejemplo de la Bootstrap 4 docs tiene el siguiente CSS:

    /* Sticky footer styles
    -------------------------------------------------- */
    html {
      position: relative;
      min-height: 100%;
    }
    body {
      margin-bottom: 60px; /* Margin bottom by footer height */
    }
    .footer {
      position: absolute;
      bottom: 0;
      width: 100%;
      height: 60px; /* Set the fixed height of the footer here */
      line-height: 60px; /* Vertically center the text there */
      background-color: #f5f5f5;
    }

    Usted probablemente ha olvidado conjunto html { position: relative; min-height: 100%; } – sé que me suele olvidar esa parte.

    • guarda mi tiempo…..muchas gracias 🙂
    • Esta debe ser la respuesta correcta, ya que aborda el Bootstrap 4.0 bodrio de no mencionar el html CSS requisitos.
    • Compruebe la explicación aquí 🙂 freecodecamp.org/news/…
  3. 22

    Actualización De 2018 – Bootstrap 4.0.0

    Ahora que Bootstrap 4.0 es flexbox, es más fácil de utilizar flexbox para la pegajosa pie de página.

    <div class="d-flex flex-column sticky-footer-wrapper">
        <nav>
        </nav>
        <main class="flex-fill">
        </main>
        <footer>
        </footer>
    </div>
    
    body, .sticky-footer-wrapper {
       min-height:100vh;
    }
    
    .flex-fill {
       flex:1 1 auto;
    }

    Demo: Bootstrap 4 Pegajosa Pie De Página (4.0.0)

    Nota: La flex-fill clase de utilidad será incluido en el próximo Bootstrap 4.1 liberación. Así que después de que la liberación de la CSS extra para flex-relleno no será necesario.

    Véase también: Bootstrap 4 – Sticky footer – Dinámica de pie de altura

    • <wrapper>…</wrapper> no es válido html(5)
    • Esta es la única correcta pegajosa pie de página de estas respuestas (fija a la parte inferior cuando el contenido es de menos de una página, de lo contrario empujado hacia abajo más allá de contenido hasta que el usuario se desplaza a la parte inferior); los otros son fijos-parte inferior pies de página (permanecer siempre visible sobre el contenido, fija a la parte inferior del navegador durante el desplazamiento)
  4. 11

    En Bootstrap 4, el uso de la fija la parte inferior de la clase a poner tu pie de página. No hay custom CSS necesarios:

    <footer class="footer fixed-bottom">
        ...
    </footer>
    • eso no es bueno, con «fijo» fondo el pie de página cubrir todos los otros elementos si la página es lo suficientemente corto…
    • Esto funcionó bien para mí. Para solucionar el problema planteado por @GianlucaGhettini, me acaba de agregar un fondo a <pie de página> y el relleno-parte inferior para <body> (igual que usted necesita para establecer padding-top en <body> cuando se utiliza una barra de navegación fija).
    • Esta es no un pegajoso pie de página (fija a la parte inferior cuando el contenido es de menos de una página, de lo contrario empujado hacia abajo más allá de contenido hasta que el usuario se desplaza hacia abajo); este se fija a la parte inferior del pie de página (permanece siempre visible sobre el contenido, fija a la parte inferior del navegador durante el desplazamiento)
  5. 1
    <html class="h-100">
    .
    .
    </html>

    Esto debería resolver el problema. Es similar a Benjineer del respuesta, pero listo bootstrap clase.
    Probado con Bootstrap 4.3.1

    • Creo que el cuerpo de la etiqueta necesidades class="h-100" así

Dejar respuesta

Please enter your comment!
Please enter your name here