Início / coding / Perguntas / 79493080
Accepted
Alex
Asked: 2025-03-08 01:36:37 +0800 CST

Conteúdo rolável sem usar position:absolute e wrapper DIV

  • 772

Como tornar o sectionelemento abaixo rolável e ocupar 100% da altura do elemento pai?

*{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  flex: 1 1 auto;
  display: flex:
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  max-height: 100%; /* <- problem */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}
<main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

Se eu colocar uma altura de pixel fixa nele, max-height: 200pxfunciona como esperado (rola), mas como tornar essa altura variável/preencher a altura restante do pai?

css

1 respostas

  1. Best Answer

    Embora você tenha especificado que max-height seja 100%, você não quer que seja 100%, você quer que ele ocupe o espaço restante que é fornecido por suas regras flex, que são apropriadas. Portanto, esse não é o problema.

    Seu problema é simplesmente que você não fornece o tamanho inicial do item flex. A propriedade flex apenas governa como ele flexiona a partir do inicial . Portanto, tudo o que você precisa é fornecer um valor de altura para seus estilos de conteúdo que governam o quão pequeno ele pode ficar. Se você quiser que ele desapareça em favor do rodapé, você pode ir com 0 assim:

    *{ margin: 0 }
main{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: black;
}

header, footer{
  flex: 0 0 auto;
  background: red;
}

content{
  height: 0; /* <- content size */
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

content nav{
  background: green;
  flex: 0 0 auto;
}

content section{
  flex: 1 1 auto;
  background: blue;
  overflow-y: auto;
  /* max-height: 100%;  <- not needed */
  
  p{
    flex: 0 0 auto;
  }
}

ul{
  flex: 1 1 auto;
  
  li{
     height: 200px;
  }
}
    <main>
  <header>header</header>
  <content>
    <nav>nav</nav>
    <section>
      <ul>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
        <li>item</li>
      </ul>
      <p>after list</p>
    </section>
  </content>
  <footer>footer</footer>
</main>

    • 1

relate perguntas