overflow: hidden sul div e corpo, un comportamento diverso

Dato questo html:overflow: hidden sul div e corpo, un comportamento diverso

<body> 
    <div id="a"></div> 
    <div id="b"></div> 
</body>

voglio #b a riempire tutto lo spazio verticale rimanente del suo blocco contenitore, ho iniziato con questo:

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

Quindi #b è 100% altezza, il che significa che sta prendendo l'altezza del blocco contenitore principale, ovvero 500px, il problema è che il overflow: hidden; sembra non funzionare, #b non è troncato.

D'altra parte, se mi avvolgo #a e #b con un altro div con le stesse proprietà del body sopra ho il risultato desiderato:

#wrap { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
} 

#a { 
    height: 100px; 
    width: 100px; 
} 

#b { 
    height: 100%; 
    width: 100%; 
}

con questo html ovviamente:

<body> 
<div id="wrap"> 
<div id="a"></div> 
<div id="b"></div> 
</div> 
</body>

La mia domanda è perché div e body sembra avere comportamenti diversi con le stesse proprietà? e c'è un modo per ottenere lo stesso effetto senza il wrapper?

Per illustrare la domanda che ho creato due jsFiddles:

jsFiddle con tag corpo come involucro: http://jsfiddle.net/3AMtG/

jsFiddle con tag div come involucro: http://jsfiddle.net/2QWn3/

Due jsFiddles con le stesse proprietà resa diversa risultati. Perché?

fonte

2013-03-17 Twissell

Non riesco a vedere alcuna differenza tra i tuoi due exaples, e questo è forse il punto, immagino che un tag body abbia un valore più basico di un tag div e ogni browser ha il proprio modo di renderare ecc. @Firefox 19.0.2 –

La proprietà overflow ha alcuni comportamenti speciali specifici degli elementi HTML html e body, che sono descritti nello CSS2.1 spec. Questi casi speciali sono in grado di adattarsi alle mutevoli impostazioni di overflow sull'intera pagina in circostanze normali, quindi gli autori devono semplicemente impostarlo su html o body, ma non su entrambi.

In questo caso, quando si applica overflow: hidden-body, colpisce in realtà la finestra invece di body (si può vedere questo ridimensionando il riquadro di anteprima per renderlo più breve - non barre di scorrimento apparirà sul riquadro di anteprima in sé). Ciò causa #b di eccedere il corpo normalmente anche se gli si assegna un'altezza fissa che è inferiore alla somma di #a e #b. In altre parole, è come se non lo aveste mai messo sul corpo in primo luogo.

Se si imposta overflow a qualcosa di diverso visible su html, però, questo fa sì che la finestra di utilizzare il valore dato al html invece di body, lasciando così la dichiarazione sulla body inalterata e gli permette di comportarsi allo stesso modo come il avvolgitore:

html { 
    overflow: auto; 
} 

body { 
    height: 500px; 
    width: 500px; 
    overflow: hidden; 
}

jsFiddle preview

fonte

2013-03-17 15:02:27 BoltClock

corpo e div hanno totalmente diverso di loro. Nel mio lavoro quotidiano, mi piace costruire il mio codice in questo modo.

<div class='xxx-ctn'> 
    <div class='xxx-inner'> 
    <div class='data-wrapper'> 
     [p|ul|ol|h1-h6|article|section]..... 
    </div> 
    </div> 
</div>

Okey, mi manca il tuo fondatore, ma penso che questo sia un buon numero di habbit.

fonte

2013-03-17 15:03:03

L'elemento body è considerato come elemento principale principale all'interno del quale risiedono altri elementi visualizzati nella finestra del browser, pertanto la proprietà width e height non è applicabile su di esso. Secondo le migliori pratiche è meglio creare un contenitore div come #wrapper che hai fatto nel tuo secondo esempio.

fonte

2013-03-17 15:44:05

overflow: hidden sul div e corpo, un comportamento diverso

risposta

Problemi correlati