Cuando se rompe el dique: Soluciones para los problemas de desbordamiento en páginas Web
Desbordamiento en páginas web
Modificado por última vez en Lunes, 02 Enero 2017 20:24
(0 votos)

Cuando se rompe el dique: Soluciones para los problemas de desbordamiento en páginas Web

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:

desbordamiento de texto

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.

desbordamiento de imagen

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%;
}

desbordamiento de texto

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:

desbordamiento flotante

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.


Deja un comentario

close

Recibe gratis nuestros nuevos artículos!

Serás el primero en conocer las novedades y noticias que pasan en Internet, nuestros tutoriales, trucos y más.

Escribe tu email:

Se abrirá una nueva ventana de FeedBurner a la izquierda de la página y habrás de validar un Captcha.

Lee nuestras Política de privacidad & Política de cookies
Puedes darte de baja de la lista de correo electrónico en cualquier momento