Plantilla CSS: Altura fija con desplazamiento
📝 Uso previsto
Esta plantilla se utiliza cuando se desea limitar la altura de elementos como textos largos o listas, permitiendo el desplazamiento interno. Es ideal para registros de chat, salidas de consola, notificaciones, etc.
📘 Explicación
Al establecer una max-height y aplicar overflow: auto;, cualquier contenido que exceda la altura se volverá desplazable dentro del contenedor.
✅ Demostración
Este es un área desplazable.
Cuando se agregan más líneas, aparecerá una barra de desplazamiento automáticamente.
Ejemplo: 1
Ejemplo: 2
Ejemplo: 3
Ejemplo: 4
Ejemplo: 5
Ejemplo: 6
Ejemplo: 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>Contenido desplazable aquí</p>
</div>
📦 Código (HTML completo)
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Altura fija con desplazamiento</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>Este es un área desplazable.</p>
<p>Más contenido activará el desplazamiento.</p>
<p>Ejemplo: 1</p>
<p>Ejemplo: 2</p>
<p>Ejemplo: 3</p>
<p>Ejemplo: 4</p>
</div>
</body>
</html>
🧩 Aplicaciones y Usos
Esta plantilla de caja con scroll puede utilizarse en una gran variedad de situaciones. Ajustando el valor de max-height, puedes modificar el tamaño del área visible según tus necesidades. Por ejemplo, puedes establecer max-height: 300px; para pantallas móviles, o max-height: 100px; para una interfaz compacta, adaptándola fácilmente al contexto.
📱 Consejos para diseño responsivo
Combinando con media queries, puedes definir alturas óptimas para diferentes dispositivos. Por ejemplo, al escribir @media (max-width: 768px) { .scroll-box { max-height: 200px; } }, puedes ajustar la altura cuando se visualiza en smartphones.
🎨 Personalización del diseño
Si deseas modificar la apariencia de la barra de desplazamiento, puedes usar el pseudo-elemento ::-webkit-scrollbar. Por ejemplo, .scroll-box::-webkit-scrollbar { width: 8px; } permite ajustar el ancho de la barra. También puedes personalizar el color de fondo, bordes redondeados y más.
Ten en cuenta que si usas overflow: scroll; en lugar de overflow: auto;, la barra de desplazamiento aparecerá incluso cuando el contenido sea breve. Usa cada opción según lo que necesites.
Esta técnica se puede aplicar en componentes como la navegación lateral, widgets de paneles de control, o textos largos dentro de modales. Es especialmente útil cuando hay poco espacio y se necesita mostrar contenido de forma eficiente.