es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • CSS: Elemento pegajoso en la parte inferior de un contenedor de desplazamiento horizontal.

CSS: Elemento pegajoso en la parte inferior de un contenedor de desplazamiento horizontal.

30 May, 2023 Programación

Estoy intentando crear un pie de página fijo dentro de un elemento de desplazamiento horizontal. Quiero que el pie de página quede alineado en la parte inferior, tenga una altura automática basada en su contenido y sea tan ancho como el elemento padre de desplazamiento (en este ejemplo de 200px), de modo que cuando se desplaza hacia la derecha, el pie de página permanezca en el mismo lugar y su contenido esté centrado horizontalmente (el contenido debería ser algún elemento, no solo un texto simple). Agradecería su ayuda.

Solución buscada:

Wanted solution

Mi código actual:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.example {
  width: 200px;
  overflow-x: auto;
}

.container {
  position: relative;
  display: flex;
  width: 400px;
  height: 100px;
  background-color: moccasin;
}

.footer {
  position: sticky;
  bottom: 0;
  background-color: palegreen;
  justify-self: center;
}

<div class="example">
  <div class="container">
    <div class="footer">
      Footer
    </div>
  </div>
</div>

Muchas gracias.

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para hacer que el pie de página sea fijo dentro de un elemento de desplazamiento horizontal, puede usar el siguiente código CSS:

    .example {
  width: 200px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1;
  position: relative;
  display: flex;
}

.footer {
  position: sticky;
  bottom: 0;
  width: 100%;
  background-color: palegreen;
  display: flex;
  align-items: center;
  justify-content: center;
}

    Y en su HTML, agregue contenido al elemento de pie de página:

    <div class="example">
  <div class="container">
    <!-- su contenido de desplazamiento horizontal aquí -->
  </div>
  <div class="footer">
    <div>Su contenido de pie de página</div>
  </div>
</div>

    Explicación del código CSS:

    • .example ahora es un contenedor flexible con dirección de columna, para que el contenedor y el pie de página se apilen verticalmente.

    • .container recibe flex: 1 para ocupar todo el espacio restante en .example.

    • .footer tiene width: 100% para llenar todo el ancho de .example, display: flex para centrar su contenido horizontal y verticalmente, y align-items: center y justify-content: center para centrar su contenido.

    Con estos cambios, el pie de página debería permanecer fijo en la parte inferior del elemento de desplazamiento y permanecer centrado cuando se desplaza horizontalmente.

Comments are closed.