Modelo CSS: Altura fixa com rolagem
📝 Uso previsto
Este modelo é útil quando você deseja limitar a altura de elementos como textos longos ou listas, permitindo a rolagem interna. Ideal para históricos de chat, saídas de logs e notificações.
📘 Explicação
Ao definir uma max-height e aplicar overflow: auto;, o conteúdo que ultrapassar a altura máxima poderá ser rolado dentro do elemento.
✅ Demonstração
Esta é uma área rolável.
À medida que mais linhas forem adicionadas, uma barra de rolagem aparecerá automaticamente.
Exemplo: 1
Exemplo: 2
Exemplo: 3
Exemplo: 4
Exemplo: 5
Exemplo: 6
Exemplo: 7
📄 Código (parcial)
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
<div class="scroll-box">
<p>Conteúdo rolável aqui</p>
</div>
📦 Código (HTML completo)
<!DOCTYPE html>
<html lang="pt">
<head>
<meta charset="UTF-8">
<title>Altura fixa com rolagem</title>
<style>
.scroll-box {
max-height: 150px;
overflow: auto;
border: 1px solid #ccc;
padding: 1rem;
background-color: #fafafa;
}
</style>
</head>
<body>
<div class="scroll-box">
<p>Esta é uma área rolável.</p>
<p>Conteúdo adicional ativará a rolagem.</p>
<p>Exemplo: 1</p>
<p>Exemplo: 2</p>
<p>Exemplo: 3</p>
<p>Exemplo: 4</p>
</div>
</body>
</html>
🧩 Aplicações e Utilizações
Este modelo de caixa com rolagem pode ser utilizado em diversas situações. Ajustando o valor de max-height, é possível alterar o tamanho da área visível conforme a necessidade. Por exemplo, max-height: 300px; pode ser usado para visualização em dispositivos móveis, ou max-height: 100px; para uma interface mais compacta — adaptando-se de forma flexível ao contexto.
📱 Dicas para design responsivo
Combinando com media queries, é possível definir alturas ideais para diferentes dispositivos. Por exemplo, @media (max-width: 768px) { .scroll-box { max-height: 200px; } } permite ajustar a altura em telas de smartphones.
🎨 Personalização do design
Se você deseja alterar a aparência da barra de rolagem, pode utilizar o pseudo-elemento ::-webkit-scrollbar. Por exemplo, .scroll-box::-webkit-scrollbar { width: 8px; } ajusta a largura da barra. Também é possível personalizar a cor de fundo, bordas arredondadas e muito mais.
Importante: usar overflow: scroll; em vez de overflow: auto; fará com que a barra de rolagem apareça mesmo quando o conteúdo for curto. Use cada opção de acordo com o contexto.
Esta técnica pode ser aplicada em componentes como navegação lateral, widgets de dashboards ou exibição de textos longos dentro de modais. É especialmente útil quando há pouco espaço e é necessário exibir conteúdo de forma eficiente.