Come rendere la larghezza CSS per riempire il genitore?

Question

Sono sicuro che questo problema è stato chiesto prima, ma non riesco a trovare la risposta.

Ho il seguente markup:

<div id="foo"> 
    <div id="bar"> 
     here be dragons 
    </div> 
</div> 

Il mio desiderio è quello di rendere foo di avere larghezza 600px (width: 600px;) e per rendere il bar sono i seguenti comportamenti:

padding-left: 2px; 
padding-right: 2px; 
margin-left: 2px; 
margin-right: 2px; 
outerWidth: 100%; 

In altre parole invece di impostare la larghezza della barra su 592px Vorrei impostare la larghezza esterna della barra su 100% in modo che sia calcolata su 592px. L'importanza qui è che posso cambiare la larghezza di foo a 800px e la barra calcolerà quando viene eseguito il rendering invece di dover eseguire manualmente la matematica per tutte queste istanze.

È possibile in puro CSS?

Alcuni più divertente con esso:

• Che cosa succede se #bar è una tabella?
• Cosa succede se #bar è una textarea?

• Cosa succede se #bar è un input?

• Cosa succede se #foo è una cella di tabella (td)? (Questo cambia il problema o è il problema identico?)

---

Finora il table#bar, input#bar è stato discusso. Non ho visto una buona soluzione per textarea # bar. Penso che una textarea senza bordi/margini/padding con un wrap div possa funzionare con lo stile div in modo che funzioni come bordi per lo textarea.

Answer 1

EDIT:

Beh quelli tutti e tre i diversi elementi hanno haha ​​diverse regole di redndering.

Così per:

table#bar è necessario impostare la larghezza a 100% altrimenti sarà solo essere il più ampio determina ha bisogno di essere. Tuttavia, se la larghezza totale delle righe della tabella è maggiore della larghezza di bar, la larghezza verrà espansa. Se ricordo che è possibile contrastare questo impostando display: block !important; anche se è stato un po 'dal momento che Ive ha dovuto risolvere il problema. (sono sicuro che qualcuno mi correggerà se sbaglio).

textarea#bar I beleive è un elemento a livello di blocco in modo che segua le regole come il div.L'unica avvertenza qui è che textarea accetta gli attributi cols e rows che vengono misurati nelle colonne dei caratteri. Se questo è specificato sull'elemento, sovrascriverà la larghezza specificata dal css.

input#bar è un elemento incorporato, quindi per impostazione predefinita non è possibile assegnarlo alla larghezza. Tuttavia, simile all'attributo , ha un attributo size sull'elemento che può determinare la larghezza. Detto questo, puoi sempre specificare una larghezza usando display: block; nel tuo css per questo. Quindi seguirà le stesse regole di rendering del div.

td#foo sarà reso come un table-cell che ha qualche pazzia ad esso. La linea di fondo qui è che per i tuoi scopi agirà proprio come div#foo per quanto riguarda la restrizione della larghezza del suo contenuto. L'unico problema qui sarà il potenziale testo non ripiegabile nella colonna da qualche parte che farebbe ignorare la tua impostazione di larghezza. Inoltre, tutte le celle della colonna otterranno la larghezza della cella più ampia.

---

Questo è il comportamento predefinito dell'elemento a livello di blocco, ad es. se la larghezza è auto (impostazione predefinita), sarà il 100% della larghezza interna dell'elemento contenitore. quindi in sostanza:

#foo {width: 800px;} 
#bar {padding-left: 2px; padding-right: 2px; margin-left: 2px; margin-right: 2px;} 

ti darà esattamente ciò che desideri.

Answer 2

quasi, basta cambiare outerWidth: 100%;-width: auto; (outerWidth non è una proprietà CSS)

in alternativa, applicare i seguenti stili per bar:

width: auto; 
display: block; 

Answer 3

Così, dopo la ricerca viene scoperto quanto segue:

Per un div#bar impostazione display:block; width: auto; provoca l'equivalente di outerWidth:100%;

Per un table#bar è necessario avvolgerlo in un div con le regole indicate di seguito. Così la vostra struttura diventa:

<div id="foo"> 
<div id="barWrap" style="border...."> 
    <table id="bar" style="width: 100%; border: 0; padding: 0; margin: 0;"> 

In questo modo il tavolo riprende il div genitore al 100%, e #barWrap viene utilizzata per aggiungere bordi/margine/padding al tavolo #bar. Si noti che sarà necessario impostare lo sfondo dell'intera struttura in #barWrap e avere lo sfondo #bar trasparente o uguale a #barWrap.

Per textarea#bar e input#bar è necessario fare la stessa cosa come table#bar, il lato negativo è che, eliminando i confini si smette widget di nativo prestazione del input/textarea e confini #barWrap s' avrà un aspetto un po' diverso rispetto a tutto altrimenti, probabilmente dovrai stilare tutti i tuoi input in questo modo.

Answer 4

utilizzare gli stili

left: 0px; 

o/e

right: 0px; 

o/e

top: 0px; 

o/e

bottom: 0px; 

Penso che per la maggior parte dei casi farà il lavoro