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.

Bootstrap 5 rellena altura restante y desplaza

04 Aug, 2023 Programación

¿Cómo puedo asegurarme de que las dos columnas se ajusten a la altura restante, pero también de que si tienen más contenido, no se desborden, sino que se pueda hacer scroll?

Estoy utilizando Bootstrap 5.

<!-- CSS únicamente -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    </head>

    <body>
        <main>

            <header class="container-fluid d-flex">
                header
            </header>

            <div class="container-fluid">
                <h1>Title</h1>

                <div class="row">
                    <div class="col-3 d-flex bg-primary">
                      Columna 1
                    </div>

                    <div class="col d-flex bg-secondary">
                      Columna 2
                    </div>
                </div> <!-- / .row -->

            </div>
        </main>
    </body>
</html>
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para asegurarse de que las dos columnas se ajusten al alto restante y, si contienen más contenido, no se desborden sino que hagan scroll, puedes usar el diseño flexbox para lograr esto. Agrega los siguientes estilos CSS al contenedor padre de las dos columnas:

    .container-fluid {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - [altura del encabezado]);
}

    Esto hará que el elemento container-fluid sea un contenedor flexible, con sus elementos dispuestos en una columna. La propiedad min-height se establece en calc(100vh - [altura del encabezado]) para asegurarse de que el contenedor ocupe la altura restante de la ventana gráfica después de restar la altura del encabezado.

    Luego, para las dos columnas, agrega los siguientes estilos CSS:

    .col-3, .col {
  overflow-y: auto;
}

    Esto establecerá la propiedad overflow-y en auto para las dos columnas, permitiéndoles hacer scroll si contienen más contenido del que su altura permite.

    Con estos estilos aplicados, las dos columnas se ajustarán al alto restante del contenedor y harán scroll si contienen más contenido del que su altura permite.

Comments are closed.