HTML/CSS: perché il corpo non si sta estendendo al suo contenuto?

Prendete questo esempio banale e aprirlo:HTML/CSS: perché il corpo non si sta estendendo al suo contenuto?

<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>

La pagina è fatto in modo che il corpo ha una foto in alto centrato sullo sfondo e un elemento di contenimento che trabocca limiti della finestra per cui v'è lo scorrimento orizzontale (se si dispone di un monitora più di 8000px, quindi sei davvero forte, tieni la finestra più piccola e aggiorna).

Il problema è che per qualche motivo lo <body> non si estende per contenere lo . Rimane solo la stessa larghezza del viewport e lo <div> lo trabocca. Ciò a sua volta fa sì che lo sfondo sia centrato nel punto sbagliato e lo ritagli alla dimensione del viewport. Abbastanza brutto quando si scorre a destra.

Ho già trovato una soluzione a questo problema, ma mi chiedo PERCHÉ è così? Sembra essere coerente anche tra i browser. Ma a mio parere questo è abbastanza contro-intuitivo e sostanzialmente semplice errato. L'elemento contenitore deve essere abbastanza grande da contenere i suoi figli, a meno che non siano posizionati in modo assoluto, nel qual caso non partecipano ai calcoli del layout.

fonte

2010-01-29 Vilx-

Ehi. Tornando a questo 2 anni dopo, e sto cercando la stessa soluzione che dici di aver trovato. La risposta di Bobince non aiuta, moltissimo .. (È fluttuante l'unica opzione?) – SoreThumb

Sto ancora utilizzando float. Dateci un'occhiata qui: http://www.drowtales.com –

I blocchi semplicemente non si estendono orizzontalmente per soddisfare il loro contenuto figlio, affatto; (1) Questo è qualcosa che accade solo nell'asse verticale. (2) Logicamente, entrambe le dimensioni non possono essere elastiche; uno deve essere risolto (wr parent). Nei CSS, la larghezza di un elemento di blocco nel flusso normale è derivata esclusivamente dal genitore (meno paddings, margini, bordi) e quindi l'altezza segue da quello, vedendo quanto contenuto si può adattare nella larghezza del blocco e scorrendolo .

L'immagine di sfondo può apparire in un luogo di confusione che si inganna a ciò che sta realmente accadendo a causa di this quirk di CSS:

Per i documenti il cui elemento principale è un HTML elemento "HTML" o un XHTML "html "elemento che ha valori calcolati di 'transparent' per 'background-color' e 'none' per 'background-image', i user agent devono invece usare il valore calcolato delle proprietà di background dal primo elemento HTML" BODY "dell'elemento o XHTML elemento "corpo" figlio quando si dipingono sfondi per la tela e non si deve dipingere uno sfondo per quell'elemento figlio. Tali sfondi devono essere ancorati nello stesso punto in cui sarebbero se fossero dipinti solo per l'elemento radice.

Questo è un hack brutto messo in atto perché la gente sono stati usati per mettere sfondi sul ‘corpo’ e averlo riempire la finestra, anche se l'elemento <body> in sé non rappresenta la finestra.

(1) tranne in alcuni casi speciali, come float e position: absolute elementi senza un width dichiarato.

(2) a meno che non lo interrompa deliberatamente impostando height/overflow.

fonte

2010-01-29 11:11:54 bobince

Stavo scrivendo esattamente la stessa risposta, ma senza la citazione dalle specifiche CSS. +1 – Boldewyn

L'eccezione all'espansione è il viewport. Niente espande il viewport a meno che il suo contenuto diretto o allegato lo richieda - questo include gli elementi div e table (ad esempio, display: table-cell sul corpo) - ma non un contenitore di blocchi.

fonte

2010-01-29 11:05:49 Anonymous

HTML/CSS: perché il corpo non si sta estendendo al suo contenuto?

risposta

Problemi correlati