Hay soluciones bien establecidas
Después de brechas inesperadas en las páginas, tal vez el problema más común es el diseño es el desbordamiento del contenido. Afortunadamente sólo hay algunas causas comunes a este problema, y algunas soluciones bien establecidas:
Desbordamiento, causa 1: un contenedor con una altura determinada
El problema más común es al establecer una altura de los elementos contenedores. Por ejemplo:
<aside>
<p>Now, cryin wont help you, prayin wont do you no good,<br>
When the levee breaks, mama, you got to move.
</aside>
Y en el CSS:
aside {
display: inline-block;
border: 1px dotted #000;
height: 10px;
}
Que produce:
Figura 1: desbordamiento de contenido debido a una altura establecida
La razón es bastante sencilla: por defecto, los contenedores se ajustarán automáticamente a la altura de su contenido. Mediante el establecimiento de una altura predeterminada en el elemento, se está subvirtiendo esta regla. La otra regla relevante es que los navegadores siempre mostrarán contenido que desborda de forma predeterminada. De este modo se obtiene el resultado que se muestra en la Figura 1.
Tratamiento:
Hay varias soluciones posibles:
1. Quitar el height del contenedor CSS, y dejar que el elemento encuentre su propia altura natural a partir de su contenido.
2. Quitar el border (o el background) del elemento: ningún border, no hay desbordamiento visual! (*)
El ajuste del overflow: scroll-y en el contenedor es casi nunca una solución: se obtiene una ventana de desplazamiento dentro de otra ventana de desplazamiento (el navegador) siendo una receta para la confusión y la frustración del usuario.
(*) Naturalmente, si el borde es una parte intrínseca del diseño, esto no es una opción, pero es sorprendente el número de veces que las personas hacen hincapié en esto cuando no hay border o background (y por lo tanto hay desbordamiento visible) sería realmente una mejor elección.
Desbordamiento, causa 2: Una imagen demasiado ancha
Una imagen colocada en una página web aparecerá en su ancho natural: para un mapa de bits, esto significa el número de píxeles horizontales de la imagen; para un SVG, el valor de sus atributos predefinidos height y width. Esto provoca desbordamiento en cualquier elemento que es demasiado pequeño para contenerlo, como se muestra en la Figura 2.
Figura 2: Una imagen que desborda su contenedor horizontal
Solución
La solución es casi siempre la mismo: proporcionar en el CSS un porcentaje de la anchura de la imagen:
img { width: 100%; }
Esto hará que la imagen siempre encaje en su parent responsive.
Puedes encontrar más información acerca de estas técnicas en estos artículos sobre Imágenes fluidas e Imágenes SVG; también se debe considerar picture y srcset para las imágenes de mapa de bits responsives.
Desbordamiento, causa 3: un contenedor con width en porcentaje
Un problema que es cada vez más común en la era de diseño responsive: a un elemento que contiene texto se le asigna un ancho en porcentaje:
aside {
width: 20%;
}
Figura 3: Texto que desborda horizontalmente su contenedor
Este elemento se reducirá con viewport. Si no se tratan, las palabras más largas eventualmente desbordarán el border horizontal, como se muestra en la Figura 3.
(Imágenes en este escenario serán atendidos por las soluciones aportadas para la causa 2)
Tratamiento:
Hay tres soluciones posibles:
1. Colocar un min-width en el elemento padre, creando un bloqueo en los anchos de ventana gráfica inferior. Sin embargo, por lo general sólo te lleva a mitad de camino.
2. Involucrar la separación de sílabas en una @media query. Esto sólo va a curar el problema para tiradas de texto especialmente largas; finalmente, tendrás que ir a la opción 3.
3. Cambiar el diseño a un diseño vertical, en vez de lado a lado; particularmente me gusta usar para esto Flexbox.
Desbordamiento, causa 4: No usar Border-Box
Por defecto, width en el CSS no es lo que la mayoría de la gente asume que es: se añadió padding a la anchura del contenido para producir un conjunto de ancho, a menudo causando problemas de desbordamiento.
Solución
Utilizar box-sizing: border-box para la mayoría o todos los elementos por defecto. Hacer esto en el inicio del desarrollo de sitios es muy importante; de lo contrario, estarás construyendo y midiendo elementos basado en una serie de supuestos incorrectos, y te verás obligado a cambiarlos todos más tarde.
Desbordamiento, causa 5: Elementos flotado
Elementos flotantes que no contribuyen a la altura de su contenedor. Tomando el siguiente ejemplo:
<div id="levee">
<img src="/chicago.jpg" alt="A photograph of the waterfront
of Chicago">
<p>Thinkin bout me baby and my happy home<br>
Going, gon to chicago,<br>
Gon to chicago,<br>
Sorry but I cant take you.<br>
Going down, going down now, going down.
<p>Photograph by
<a href="https://www.flickr.com/photos/snake_bill/13812951923/">
Yulin Lu</a>, used under a Creative Coommons
Attribution-NonCommercial-NoDerivs 2.0 Generic license.
</div>
Con este CSS:
#levee {
border: 2px solid #333;
}
#levee img {
float: left;
width: 50%;
margin: 2rem;
}
Produce lo que se ve en la Figura 4:
Figura 4: El contenido flota y desborda su contenedor
Tratamiento:
Hay muchas soluciones "clear floats" o "clearfix" para este problema. La solución más simple es extremadamente eficaz, pero también contra-intuitiva: utilizar overflow: hidden el elemento padre. En la práctica, esto hace lo contrario de lo que cabría esperar:
#levee {
border: 2px solid #333;
overflow: hidden;
}
Que fija el problema por completo.