CSS Fill parent div 100% clean

Desidero essere in grado di riempire esattamente il div di un genitore al 100% con un intervallo figlio. Il problema è che l'intervallo che voglio riempire è a tema con themeroller e ha spaziatura e margini variabili. Quindi non riesco a codificare hard qualsiasi dimensione per l'altezza dello span.CSS Fill parent div 100% clean

Se provo a impostare l'altezza dello span al 100%, in realtà esso va oltre e riempie più come 100% + 6 pixel per questo tema (ma l'importo eccessivo varia a seconda del tema). Come si fa a fare in modo che, indipendentemente dalle dimensioni del padding/margini per lo span, esso riempirà sempre solo il 100% del div genitore?

Grazie mille per l'aiuto.

fonte

2011-12-03 w.donahue

Si dovrebbe esaminare il riquadro di ridimensionamento: border box, ' – jessegavin

Sì, ho appena notato che mentre stavo costruendo il mio violino, jessegavin ha dato la risposta" versione breve "qui nel suo commento. – ScottS

-webkit-box-sizing: border-box; 
-moz-box-sizing: border-box;  
box-sizing: border-box;

Vedi http://jsfiddle.net/mbB8t/2/

chiarito: Opere per tutti i browser moderni (IE8 +).

fonte

2011-12-03 04:16:39 ScottS

Questo sembra non funzionare se il genitore ha il 'padding' invece. [Questo] (https://jsfiddle.net/mbB8t/137/) è il tuo esatto fiddle ha semplicemente cambiato il 'div margin' in' padding', Sai come ottenere gli stessi risultati con il padding? Grazie. – Jake

@Jake: Dato il vincolo extra di come è configurato il div padre, se non puoi (o non vuoi) rimuovere il padding da esso, allora probabilmente l'unica opzione è [usare il posizionamento per realizzarlo] (http: //jsfiddle.net/mbB8t/145/). Che potrebbe anche non essere desiderabile, a seconda della situazione. – ScottS

Ok, grazie. Sembra che abbia funzionato. – Jake

Per eseguire questa operazione, è necessario calcolare il valore di paddings e margini aggiungendo la larghezza 2x dell'ampiezza più l'altezza. allora puoi sapere quali valori usare per span per riempire il div genitore. controllare gli esempi qui http://www.phcityonweb.com/tutorial/css-programming-lessons/margin-padding

fonte

2011-12-03 04:03:28

CSS Fill parent div 100% clean

risposta

Problemi correlati