jQuery: altezza() per un bordo-box

Question

il suo dichiarato nel jQuery API:

noti che .height() restituirà sempre l'altezza del contenuto, a prescindere del valore del CSS box-sizing proprietà. A partire da jQuery 1.8, questo potrebbe richiedere il recupero dell'altezza CSS più la proprietà di ridimensionamento della casella e quindi sottrarre qualsiasi bordo e spaziatura potenziale su ciascun elemento quando l'elemento ha il ridimensionamento della casella: border-box. Per evitare questa penalità, usa .css ("altezza") piuttosto che .height().

Ho provato il seguente esempio

<div id='wrapper' class='boxA'> 
    <div class='boxB'> 
    Test 
    </div> 
</div> 

con il CSS

.boxA{ 
    padding: 20px; 
    background-color: yellow; 
    box-sizing: border-box; 
    margin: 50px; 
} 

.boxB{ 
    height: 50px; 
    background-color: red; 
} 

Secondo l'API jQuery ero sicuro che

$('#wrapper').height($('#wrapper').height()); 

sarebbe impostare l'altezza boxa a 50px (dal momento che l'altezza del contenuto è 50px) ma io fonda d che l'altezza era impostata su 90 px. Tuttavia se uso

$('#wrapper').css('height', $('#wrapper').height()+"px"); 

l'altezza del boxa ottiene 50px e quindi si restringe. Perché il primo metodo non produce anche un'altezza di 50px?

Inoltre, il comando

$('#wrapper').height($('#wrapper').css('height')); 

sarà impostare l'altezza di boxa per 130px ma $('#wrapper').css('height') rendimenti 90. Che cosa è successo qui?

È possibile trovare questi esempi in questo jFiddle.

Answer 1

L'API jQuery dice

noti che .height() restituirà sempre l'altezza del contenuto, a prescindere del valore della proprietà box-sizing CSS.

Ciò implica che $('#wrapper').height() è 50px (dal contenuto di altezza di boxa è 50px) e $('#wrapper').css('height') è 90px (perché avete un top-padding di 20px e un fondo-padding di 20px) e per un border-box la l'altezza è data dal contenuto-altezza + padding + bordo.Inoltre l'API afferma che

noti che .Height (valore) imposta l'altezza del contenuto della scatola, indipendentemente del valore della proprietà box-sizing CSS.

Quindi, se si utilizza

$('#wrapper').height($('#wrapper').height()); 

allora il contenuto di altezza sarà impostato a 50px, ma dal momento che si dispone di un border-box questo implica che height=90px, perché l'altezza è content-altezza + padding + bordo (aggiungendo due volte il riempimento di 20 px).

Questo vale anche per il tuo secondo esempio

$('#wrapper').height($('#wrapper').css('height')); 

al fine di modificare il contenuto-altezza 90px, l'altezza totale del vostro border-box deve essere 90px 20px + + 20px = 130px.

Pertanto, tutto va bene.

Answer 2

Sembra .height() è sempre misurata con content-box, ma quando si applica il nuovo valore che rispetta box-sizing, quindi è l'aggiunta misurata content-box valore al resto delle impostazioni in scatola hanno border-box istituito.

Se si cambia box-sizing-content-box a demo, si comporterà esattamente come quello (si in ogni caso impostare 50px a ciascuno, che col content-box valore di tutte le caselle avranno 90px).