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.

¿Cómo aplicar una barra de desplazamiento a una sección dentro de un flexbox?

12 Jun, 2023 Programación

Considere lo siguiente:

  • {padding: 0; margin: 0; }

body {
height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
}

header {
flex: 0 0 50px;
background-color: lightgray;
}

div#wrapper {
flex: 1 0 0px;
display: flex;
flex-direction: row;
}

aside {
background-color: darkgray;
flex: 0 0 50px;
}

main {
display: block;
flex: 1 1 0px;
background-color: aliceblue;
}

div#content {
width: 60px;
height: 2000px;
margin: 10px;
background-color: red;
}

div#content-wrap {
width: 100%;
height: 100%;
}

div#content-container {
height: 100%;
overflow-y: scroll;
}




En el fragmento anterior, el <body> ocupa todo el espacio disponible, consta de un elemento <header> que toma una altura arbitraria y un <div id="wrapper"> que ocupa el resto de la altura disponible. El mencionado “#wrapper” tiene una barra lateral de ancho arbitrario y una sección principal “<main>” que ocupa el resto del ancho. Deseo que sólo la sección “main” sea desplazable, pero aplicar un “#content” lo suficientemente largo hace que el cuerpo tenga la barra de desplazamiento. (aunque he fijado las alturas en 100%) Entonces, ¿cómo solucionarlo?

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para solucionar este problema, necesitamos hacer dos cambios:

    1. Debemos establecer la altura de los elementos html y body en 100%, para que el elemento body ocupe todo el espacio disponible dentro del elemento html.

    2. Debemos establecer la altura del elemento #wrapper en calc(100% - 50px) para que ocupe toda la altura disponible menos la altura del elemento header.

    Aquí está el código CSS actualizado:

    * {padding: 0; margin: 0; }

html, body {
    height: 100%;
}

body {
    width: 100vw;
    display: flex;
    flex-direction: column;
}

header {
    flex: 0 0 50px;
    background-color: lightgray;
}

div#wrapper {
    flex: 1 0 0px;
    height: calc(100% - 50px);
    display: flex;
    flex-direction: row;
}

aside {
    background-color: darkgray;
    flex: 0 0 50px;
}

main {
    display: block;
    flex: 1 1 0px;
    background-color: aliceblue;
    height: 100%;
}

div#content {
    width: 60px;
    height: 2000px;
    margin: 10px;
    background-color: red;
}


div#content-wrap {
    width: 100%;
    height: 100%;
}

div#content-container {
    height: 100%;
    overflow-y: scroll;
}

    Con estos cambios, solo la sección main tendrá una barra de desplazamiento y el elemento body no la tendrá.

Comments are closed.