HTML/CSS: ¿Por qué el cuerpo no se extiende a su contenido?

Tome este ejemplo trivial y abrirlo:HTML/CSS: ¿Por qué el cuerpo no se extiende a su contenido?

<html> 
    <body style="background-image:url(http://upload.wikimedia.org/wikipedia/commons/2/21/Mandel_zoom_00_mandelbrot_set.jpg);background-repeat: no-repeat; background-position: top center;"> 
     <div style="width: 8000px; border: 3px solid red;">Demo</div> 
    </body> 
</html>

se hace la página para que el cuerpo tiene una imagen en la parte superior centrada fondo y un elemento contenedor que se desborda límites de la ventana por lo que no es el desplazamiento horizontal (si tiene una monitor más ancho que 8000px, entonces eres realmente genial, por favor haz la ventana más pequeña y actualiza).

El problema es que por alguna razón el <body> no se estira para contener el <div>. Solo se mantiene el mismo ancho que la ventana gráfica y el <div> lo desborda. Esto a su vez hace que el fondo se centre en el lugar equivocado y lo recorta al tamaño de la ventana gráfica. Muy feo cuando te desplazas hacia la derecha.

Ya he encontrado una solución a este problema, pero me pregunto ¿POR QUÉ esto es así? Parece ser constante en todos los navegadores. Pero en mi opinión esto es bastante contra-intuitivo y básicamente simple mal. El elemento del contenedor debe ser lo suficientemente grande como para contener a sus hijos, a menos que estén absolutamente posicionados, por supuesto, en cuyo caso no participan en los cálculos del diseño.

Fuente

2010-01-29 Vilx-

Hey. Volvamos a esto dos años después, y estoy buscando la misma solución que dices que has encontrado. La respuesta de Bobince no ayuda, mucho ... (¿Flotar es la única opción?) – SoreThumb

Todavía estoy usando flotador. Compruébelo aquí: http://www.drowtales.com –

Los bloques simplemente no se estiran horizontalmente para acomodar el contenido de su hijo, en absoluto; nunca tener. (1) Eso es algo que solo ocurre en el eje vertical. (2) Lógicamente, ambas dimensiones no pueden ser elásticas; uno tiene que ser reparado (wrt parent). En CSS, el ancho de un elemento de bloque en flujo normal se deriva únicamente del elemento principal (menos rellenos, márgenes, bordes), y luego la altura sigue a partir de eso, viendo cuánto contenido puede caber en el ancho del bloque y fluirlo .

La imagen de fondo puede aparecer en un lugar confuso que induce a error a lo que realmente está sucediendo debido a this quirk de CSS:

documentos cuyo elemento raíz es un elemento HTML "HTML" o un XHTML "html "elemento que tiene valores computados de 'transparent' para 'background-color' y 'none' para 'background-image', los agentes de usuario deben usar el valor calculado de las propiedades de fondo del primer elemento HTML" BODY "de ese elemento o XHTML elemento infantil "cuerpo" al pintar fondos para el lienzo, y no debe pintar un fondo para ese elemento secundario. Tales fondos también deben anclarse en el mismo punto en que estarían si se pintaran solo para el elemento raíz.

Este es un truco desagradable puesto en marcha porque la gente se utilizaron para poner fondos en ‘cuerpo’ y hacer que se llene la ventana, a pesar de que el elemento <body> en sí no representa el área de visualización.

(1) excepto en algunos casos especiales, como float y position: absolute sin elementos declarados width.

(2) a menos que lo detenga deliberadamente al configurar height/overflow.

Fuente

2010-01-29 11:11:54 bobince

Estaba listo para escribir exactamente la misma respuesta, pero sin la cita de la especificación CSS. +1 – Boldewyn

La excepción a la expansión es la ventana gráfica. Nada expande la ventana gráfica a menos que sus contenidos directos o adjuntos lo requieran; esto incluye los elementos div y table (por ejemplo, display: table-cell en el cuerpo), pero no un contenedor de bloques.

Fuente

2010-01-29 11:05:49 Anonymous

HTML/CSS: ¿Por qué el cuerpo no se extiende a su contenido?

Respuesta

Cuestiones relacionadas