Espandere un genitore <div> all'altezza dei suoi figli

308

Ho una struttura di pagina simile a questa:

<body>
  <div id="parent">
    <div id="childRightCol">
      /*Content*/
    </div>
    <div id="childLeftCol">
      /*Content*/
    </div>
  </div>
</body>

Vorrei per il genitore divdi espandersi in heightquando l'interno div's heightaumenta.

Modifica:
un problema è che se il widthcontenuto del figlio si espande oltre la widthfinestra del browser, il mio CSS attuale mette una barra di scorrimento orizzontale sul genitore div. Vorrei che la barra di scorrimento fosse a livello di pagina. Attualmente il mio genitore div è impostato suoverflow: auto;

Potete per favore aiutarmi con il CSS per questo?

html  css 
— Steve Horn
fonte
6
Stai flottando i div interni? Puoi pubblicare l'attuale CSS?
— Eric
2
@Eric - anche questo è stato un mio problema - i miei figli div erano galleggianti: a sinistra, quando l'ho rimosso, il 'genitore' veniva automaticamente riconosciuto e allungato a tutta altezza!
— Michael Goltsman,

Risposte:

539

Prova questo per il genitore, ha funzionato per me.

overflow:auto;

AGGIORNARE:

Un'altra soluzione che ha funzionato:

Genitore :

display: table;

Bambino :

display: table-row;
— Dr Casper Black
fonte
67
overflow:autosignifica che il browser dovrebbe decidere quale valore applicare. Quello che fa davvero il trucco è overflow: overlay.
— Alba Mendez,
14
@jmendeth Non esiste un valore di overflow chiamato "overlay". Cosa sta funzionando se i div del bambino sono flottati sta dichiarando overflow:hidden.
— Christoph,
16
Waaaait. Rilassare. Una cosa è affermare che overlaynon è supportato al di fuori di Webkit. Un altro completamente diverso è dire che non esiste affatto. Per favore, prima RTFM . ;)
— Alba Mendez,
6
Se è solo su Webkit, esiste solo il 20%: P Applausi per il link, non avevo mai visto questo sito prima. È ben mantenuto e aggiornato? Lo giuri?
— pilau,
20
Una risposta alternativa è stackoverflow.com/questions/450903/… e si propone di impostare display:inline-block. Che ha funzionato alla grande per me.
— Jens,
26

aggiungi a clear:both. supponendo che le tue colonne stiano fluttuando. A seconda di come viene specificata la tua altezza, potrebbe essere necessario un overflow: auto;

<body>
<div id="parent">
    <div id="childRightCol">
    <div>
    <div id="childLeftCol">
    <div>
    <div id="clear" style="clear:both;"></div>
</div>
</body>
— bendewey
fonte
In questo modo mi dà una barra di scorrimento orizzontale sul div padre quando il contenuto è più largo della finestra del browser. Vorrei che lo scorrimento orizzontale fosse sull'intera pagina.
— Steve Horn,
1
Perché hai bisogno dell'overflow: auto ;? Nel mio test il chiaro: entrambi; sufficiente.
— Paolo Bergantino,
3
Ciò presuppone anche che il genitore non abbia un'altezza specificata.
— Bendewey,
Questo approccio funziona bene in Firefox, ma non funziona in IE 6. Qualche soluzione alternativa?
— Steve Horn,
4

Per coloro che non riescono a capire questo nelle istruzioni di questa risposta lì:

Tenta di impostare imbottitura valore più allora 0 , se div bambino hanno margin-top o margin-bottom è possibile sostituirlo con imbottitura

Ad esempio se hai

#childRightCol
{
    margin-top: 30px;
}
#childLeftCol
{
    margin-bottom: 20px;
}

sarà meglio sostituirlo con:

#parent
{
    padding: 30px 0px 20px 0px;
}
— io mio
fonte
4

L'uso di qualcosa come l'auto-compensazione divè perfetto per una situazione come questa . Quindi userete solo una classe sul genitore ... come:

<div id="parent" class="clearfix">
— Tim Knight
fonte
3

Inserisci 

clear:both;

Al css del div genitore, oppure aggiungi un div in fondo al div genitore che cancella: entrambi;

Questa è la risposta corretta, perché overflow: auto; può funzionare per semplici layout Web, ma interferirà con gli elementi che iniziano a utilizzare elementi come il margine negativo, ecc

— Internet Marketing Boise
fonte
2

Questo fa quello che vuoi?

.childRightCol, .childLeftCol
{
    display: inline-block;
    width: 50%;
    margin: 0;
    padding: 0;
    vertical-align: top;
}
— Eric
fonte
1

Ho fatto espandere un div genitore attorno al contenuto di un div figlio avendo il div figlio come una singola colonna che non ha alcun attributo di posizionamento come assoluto specificato.

Esempio:

#wrap {width:400px;padding:10px 200px 10px 200px;position:relative;margin:0px auto;}
#maincolumn {width:400px;}

Basato sul div di Maincolumn che è il div figlio più profondo di #wrap, questo definisce la profondità del div #wrap e l'imbottitura di 200px su entrambi i lati crea due grandi colonne vuote in cui posizionare i div assolutamente posizionati come preferisci. Puoi anche cambiare il padding in alto e in basso per posizionare div di intestazione e piè di pagina usando position: absolute.

— Ian
fonte
0

Devi applicare la soluzione clearfix sul contenitore padre. Ecco un bell'articolo che spiega il link di correzione

— Nikhil
fonte
0

Se i tuoi contenuti all'interno di #childRightCol e #childRightCol sono spostati a sinistra oa destra, aggiungi questo in css:

#childRightCol:before { display: table; content: " "; }
#childRightCol:after { display: table; content: " "; clear: both; }
#childLeftCol:before { display: table; content: " "; }
#childLeftCol:after { display: table; content: " "; clear: both; }
— user3436572
fonte
0

Funziona come descritto dalle specifiche: diverse risposte qui sono valide e coerenti con quanto segue:

Se ha figli a livello di blocco, l'altezza è la distanza tra il bordo superiore del riquadro figlio a livello di blocco più alto che non ha margini compressi attraverso di esso e il bordo inferiore del riquadro figlio a livello di blocco più in basso che non ha collassato i margini. Tuttavia, se l'elemento ha un'imbottitura superiore diversa da zero e / o il bordo superiore o è l'elemento radice, il contenuto inizia dal margine superiore del figlio più in alto. (Il primo caso esprime il fatto che i margini superiore e inferiore dell'elemento collassano con quelli dei figli più in alto e più in basso, mentre nel secondo caso la presenza dell'imbottitura / bordo impedisce ai margini superiori di collassare.) Allo stesso modo, se il L'elemento ha un'imbottitura inferiore diversa da zero e / o bordo inferiore, quindi il contenuto termina sul margine inferiore del figlio inferiore.

da qui: https://www.w3.org/TR/css3-box/#blockwidth

— Adam Tolley
fonte
0

Di seguito il codice ha funzionato per me.

css

.parent{
    overflow: auto;
}

html

<div class="parent">
    <div class="child1">
    </div>
    <div class="child2">
    </div>
    <div id="clear" style="clear:both;"></div>
</div>
— anjaneyulubatta505
fonte
0 

#childRightCol
{
float:right;
}
#childLeftCol
{
float:left;
}
#parent
{
    display:inline;
}
Espandi frammento

— YourBestBet
fonte
0

Da dove iniziamo

Ecco alcuni esempi di HTML e CSS. Nel nostro esempio, abbiamo un elemento padre con due elementi figlio fluttuati.

/* The CSS you're starting with may look similar to this.
 * This doesn't solve our problem yet, but we'll get there shortly.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
<!-- The HTML you're starting with might look similar to this -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Espandi frammento

Soluzione n. 1: overflow: auto

Una soluzione che funziona in tutti i browser moderni e in Internet Explorer fino a IE8 è quella di aggiungere overflow: autol'elemento genitore. Questo funziona anche in IE7, con barre di scorrimento aggiunte.

/* Our Modified CSS.
 * This is one way we can solve our problem.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
  overflow: auto;
  /*This is what we added!*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Espandi frammento

Soluzione n. 2: contenitore padre mobile

Un'altra soluzione che funziona in tutti i browser moderni e di ritorno a IE7 è di spostare il contenitore padre.

Questo potrebbe non essere sempre pratico, perché il div del genitore mobile potrebbe influire su altre parti del layout della pagina.

/* Modified CSS #2.
 * Floating parent div.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  float: left;
  /*Added*/
  height: auto;
  width: 100%;
  /*Added*/
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}
Espandi frammento

Metodo n. 3: aggiungi div di compensazione sotto gli elementi fluttuanti

/* 
 * CSS to Solution #3.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clear {
  clear: both;
}
<!-- Solution 3, Add a clearing div to bottom of parent element -->
<div class="containing-div">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
  <div class="clear"></div>
</div>
Espandi frammento

Metodo n. 4: aggiungere il div della compensazione all'elemento padre Questa soluzione è abbastanza antiproiettile per browser meno recenti e browser più recenti.

/* 
 * CSS to Solution #4.
 */

.containing-div {
  background-color: #d2b48c;
  display: block;
  height: auto;
}

.floating-div {
  float: left;
  width: 50%;
}

.floating-div ul {
  display: inline-block;
  height: auto;
}


/*Added*/

.clearfix {
  clear: both;
}

.clearfix:after {
  clear: both;
  content: "";
  display: table;
}
<!-- Solution 4, make parent element self-clearing -->
<div class="containing-div clearfix">
  <div class="floating-div">
    <ul>
      <li>List Item One</li>
      <li>List Item Two</li>
      <li>List Item Three</li>
      <li>List Item Four</li>
    </ul>
  </div>
  <div class="floating-div">
    <ul>
      <li>List Item Five</li>
      <li>List Item Six</li>
      <li>List Item Seven</li>
      <li>List Item Eight</li>
    </ul>
  </div>
</div>
Espandi frammento

da https://www.lockedownseo.com/parent-div-100-height-child-floated-elements/

— jafar690
fonte
-1

Uso questo CSS come genitore e funziona:

min-height:350px;
background:url(../images/inner/details_middle.gif) repeat-y 0 0 ;
padding:5px 10px;   
text-align:right;
overflow: hidden;
position: relative;
width: 100%;
— Pejman
fonte
2
Usi l'altezza minima, quindi non conta;)
— pilau
-1 

#parent{
  background-color:green;
  height:auto;
  width:300px;
  overflow:hidden;
}

#childRightCol{
  color:gray;
  background-color:yellow;
  margin:10px;
  padding:10px;
}
<div id="parent">
    <div id="childRightCol">
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vulputate sit amet neque ac consequat.
        </p>
    </div>
  </div>
Espandi frammento

si gestisce utilizzando la overflow:hidden;proprietà in CSS

— Chintan Kotadiya
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.