come rendere i div dei bambini sempre in forma all'interno di parent div?

La mia domanda è se c'è un modo, senza usare javascript, per fare in modo che i div figlio si estendano fino ai confini del loro genitore, senza superare quei confini, quando non si può conoscere in anticipo la dimensione del div genitore?come rendere i div dei bambini sempre in forma all'interno di parent div?

Di seguito sono riportati markup/stili di esempio che dimostrano il mio problema. Se lo carichi nel browser, vedrai che #two e #three si estendono entrambi al di fuori del loro genitore, # uno, e causano la visualizzazione delle barre di scorrimento.

Il mio problema non sono tanto le barre di scorrimento, ma non so come dire al div del bambino di occupare la larghezza o l'altezza rimanenti, piuttosto che l'altezza o larghezza del genitore.

<html> 
<head> 
<style> 
html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:100%;height:100%;} 
#two {width:100%;height:50px;} 
#three {width:100px;height:100%;} 
</style> 
</head> 
<body> 
    <div id="one" class="border"> 
     <div id="two" class="border margin"></div> 
     <div id="three" class="border margin"></div> 
    </div> 
</body>

fonte

2009-07-08 Tim Sheiner

si potrebbe usare ereditare

#one {width:500px;height:300px;} 
#two {width:inherit;height:inherit;} 
#three {width:inherit;height:inherit;}

fonte

2009-07-08 14:01:03 Silfverstrom

Non credo che le opere. Bene, almeno se quelle sono le uniche modifiche che fai. – thebrokencube

Non ho potuto osservare alcun cambiamento dall'originale quando si usano questi stili. –

Nel tuo esempio, non è possibile: la 5px margin viene aggiunto al riquadro di delimitazione di div#two e div#three efficacemente rendendo la loro larghezza e l'altezza 100 % di parent + 5px, che andrà in overflow.

È possibile utilizzare padding sull'elemento genitore di assicurare non c'è 5px di spazio all'interno del suo confine:

<style> 
    html, body {width:100%;height:100%;margin:0;padding:0;} 
    .border {border:1px solid black;} 
    #one {padding:5px;width:500px;height:300px;} 
    #two {width:100%;height:50px;} 
    #three {width:100px;height:100%;} 
</style>

EDIT: In fase di test, la rimozione del width:100% da div#two sarà effettivamente farlo lavorare correttamente come div s sono blocchi -levelo e riempirà sempre le larghezze dei genitori di default. Questo dovrebbe chiarire il tuo primo caso se desideri utilizzare il margine.

fonte

2009-07-08 14:06:43 ajm

Oppure, mantieni le percentuali: utilizzando un margine percentuale e una percentuale di larghezza/altezza farai anche il trucco mentre lavori con le stesse "unità". Quella altezza al 100% ti prenderà, però, dato che c'è un altro bambino che usa una parte dell'altezza dei genitori. – ajm

Che non funziona, l'altezza: 100% in #three riempirà sempre il contenitore genitore. –

Sì, come ho detto nel mio commento, l'altezza del 100% sta per traboccare ogni volta. Qualcosa come un margine del 2% su #two e #three, un 10% di altezza su #two e un 82% di altezza su #three potrebbe fare il trucco. – ajm

Se ho capito bene, il metodo più semplice è far galleggiare i bambini. Per esempio:

#one { width: 500px; height: 1%; overflow: hidden; background: red; } 
#two { float: left; width: 250px; height: 400px; background: aqua; } 
#two { float: left; width: 250px; height: 200px; background: lime; }

Impostazione di una dimensione (altezza/larghezza) e troppo pieno per l'auto o nascosti sull'elemento genitore induce a contenere elementi figlio flottanti.

Nota overflow: nascosto; occasionalmente può causare problemi con contenuti sempre tagliati fuori, nel qual caso si potrebbe desiderare di provare questo metodo alternativo:

http://www.positioniseverything.net/easyclearing.html

fonte

2009-07-08 14:08:27

Ciò ti obbliga a impostare l'altezza degli elementi contenuti anziché a impostare l'altezza del contenitore e ad allungare gli elementi contenuti per adattarli. –

Questo tipo di lavoro, ma tronca il fondo del bambino lungo, non rende il bambino "adatto" al genitore –

Per larghezza è facile, è sufficiente rimuovere la regola width: 100%. Per impostazione predefinita, lo div si allungherà per adattarsi al contenitore principale.

L'altezza non è proprio così semplice. Potresti fare qualcosa come lo equal height column trick.

html, body {width:100%;height:100%;margin:0;padding:0;} 
.border {border:1px solid black;} 
.margin { margin:5px;} 
#one {width:500px;height:300px; overflow: hidden;} 
#two {height:50px;} 
#three {width:100px; padding-bottom: 30000px; margin-bottom: -30000px;}

fonte

2009-07-08 14:10:56

Questo tronca anche il div long long, ma non lo abbrevia per adattarsi al genitore con il margine desiderato in basso. –

Per la chiusura, penso che la risposta a questa domanda sia che non c'è soluzione. L'unico modo per ottenere il comportamento che voglio è con javascript.

fonte

2009-07-16 19:55:59

Vedi la mia risposta. In realtà fornisco due diversi modi per farlo. – Ryan

Spesso le tabelle possono facilmente fare ciò che le div richiedono il salto del telaio per essere compiuto. Sfortunatamente, i div sono entrati in CSS molto male pensati. – fyngyrz

Se si desidera che le div del bambino si adattino alla dimensione del genitore, è necessario inserire un margine almeno della dimensione dei bordi figlio sulle div child (child.margin >= child.bordersize).

Per questo esempio, rimuovere la larghezza : 100%; e l'altezza : 100% in #one e rimuovere la larghezza : 100% in #two. Dovrebbe essere qualcosa di simile:

html, body {width:100%; height:100%; margin:0; padding:0;}  
.border {border:1px solid black;} 
.margin {margin:5px;} 
\#one {} 
\#two {height:50px;}  
\#three {width:100px; height:100%;}

fonte

2011-02-11 20:13:17 Wade

Ho avuto un problema simile, ma nel mio caso, ho contenuto nel mio div che altezza-saggio supererà i confini del div genitore. Quando lo fa, voglio farlo scorrere automaticamente. Sono stato in grado di realizzare questo utilizzando

.vscrolling_container { height: 100%; overflow: auto; }

fonte

2011-04-11 22:18:33 meem

L'ultimo tentativo sarebbe buono. Ma se y tenta di inserire il testo y vedrà che il testo supererà i confini

fonte

2013-02-11 16:39:46 ABA

Si prega di inviare una risposta solo se risponde alla domanda originale. Se vuoi semplicemente commentare qualcosa da una risposta o da una domanda, aggiungi un commento. –

si potrebbe usare display: inline-block;

speranza è utile.

fonte

2013-10-28 09:48:09

Ci sono due tecniche comunemente utilizzate per questo:

Absolute Positioning
Stili tabella

Dato il codice HTML che hai fornito qui è la soluzione utilizzando il posizionamento assoluto:

body #one { 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    right: 0; 
 
    width: auto; 
 
    height: auto; 
 
} 
 
body #two { 
 
    width: auto; 
 
} 
 
body #three { 
 
    position: absolute; 
 
    top: 60px; 
 
    bottom: 0; 
 
    height: auto; 
 
}

<html> 
 
<head> 
 
<style> 
 
html, body {width:100%;height:100%;margin:0;padding:0;} 
 
.border {border:1px solid black;} 
 
.margin { margin:5px;} 
 
#one {width:100%;height:100%;} 
 
#two {width:100%;height:50px;} 
 
#three {width:100px;height:100%;} 
 
</style> 
 
</head> 
 
<body> 
 
\t <div id="one" class="border"> 
 
\t \t <div id="two" class="border margin"></div> 
 
\t \t <div id="three" class="border margin"></div> 
 
\t </div> 
 
</body

È sempre possibile utilizzare direttamente gli elementi table, tr e td nonostante le critiche comuni in quanto consentiranno di completare il lavoro. Se preferisci usare i CSS non c'è un equivalente per colspan, quindi probabilmente finirai con le tabelle nidificate. Ecco un esempio:

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 100%; 
 
} 
 
#one { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    overflow: hidden; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
} 
 
#two { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 50px; 
 
    padding: 5px; 
 
    width: 100%; 
 
} 
 
#three { 
 
    box-sizing: border-box; 
 
    display: table; 
 
    height: 100%; 
 
    padding-bottom: 60px; 
 
    padding-left: 5px; 
 
    
 
} 
 
#four { 
 
    display: table-cell; 
 
    border: 1px solid black; 
 
} 
 
#five { 
 
    display: table-cell; 
 
    width: 100px; 
 
    border: 1px solid black; 
 
} 
 
#six { 
 
    display: table-cell; 
 
}

<html> 
 
\t <div id="one"> 
 
\t  <div id="two"> 
 
      <div id="four"></div> 
 
     </div> 
 
     <div id="three"> 
 
      <div id="five"></div> 
 
      <div id="six"></div> 
 
     </div> 
 
\t </div> 
 
    </html>

fonte

2016-09-14 17:07:38 Ryan

Assicurarsi che il div più esterno ha le seguenti proprietà CSS:

.outer { 
    /* ... */ 
    height: auto; 
    overflow: hidden; 
    /* ... */ 
}

fonte

2017-07-10 01:41:44

come rendere i div dei bambini sempre in forma all'interno di parent div?

risposta

Problemi correlati