fai espandere l'altezza del div con il suo contenuto

376

Ho questi div annidati e ho bisogno che il contenitore principale si espanda (in altezza) per ospitare i DIV all'interno

    <!-- head -->
    ...
    <!-- /head -->

    <body class="main">
      <div id="container">
        <div id="header">
          <!--series of divs in here, graphic banner etc. -->
        </div>

    <div id="main_content"> <!-- this DIV _should_ stretch to accommodate inner divs -->
      <div id="items_list" class="items_list ui-sortable">
        <div id="item_35" class="item_details">
        </div>
        <div id="item_36" class="item_details">
        </div>        
        <div id="item_37" class="item_details">
        </div>
        <!-- this list of DIVs "item_xx" goes on for a while
             each one representing a photo with name, caption etcetc -->
      </div>
    </div>
    <br class="clear"/>

    <div id="footer">
    </div>
  </body>
</html>

CSS è questo:

* {
    padding: 0;
    margin: 0;
}

.main {
    font: 100% Verdana, Arial, Helvetica, sans-serif;
    background: #4c5462;
    margin: 0; 
    padding: 0;
    text-align: center; 
    color: #000000;
}
.main #container {
    height: auto;
    width: 46em;
    background: #4c5462;
    margin: 0 auto; 
    border: 0px solid #000000;
    text-align: left;       
}

.main #main_content {
    padding: 5px;
    margin: 0px;
}
#items_list {
    width: 400px;
    float: left;
}

.items_list {
    width: 400px;
    float: left;
}
.item_details {
    margin-top: 3px;
    margin-bottom: 3px;
    padding: 3px;
    float: left;
    border-bottom: 0.5px solid blue;
}

Il problema che ho è che #main_contentnon si estende per adattarsi a tutti i div interni, con il risultato che continuano ad andare sullo sfondo.

Come posso risolvere questo problema considerando lo scenario sopra?

css height

— patrick
fonte

5

Ragazzi, grazie a tutti per le risposte! la soluzione migliore per il mio caso specifico era codificare un BR per cancellare entrambi i lati (grazie Jennyfofenny e anche Ricebowl) Comunque, anche altre soluzioni hanno funzionato: mettere l'overflow: l'auto era ok e anche il float #main_content era ok (anche se ir ha ridotto la larghezza di quel div alla dimensione dei div del bambino). Ora, essendo un principiante, mi chiedo: queste soluzioni hanno degli svantaggi o posso usarle indifferentemente? (es. forse uno di loro non funziona con IE6 o simili ...)

— patrick,

1

@Patrick, se desideri sviluppare ulteriormente la tua domanda, fai clic sul link "modifica" (sotto il testo corrente della domanda) e aggiungi le ulteriori domande. La convenzione suggerisce di utilizzare qualcosa come <strong>Edited</strong>$Reason_for_revising_question...Potresti aver bisogno di cambiare il titolo della domanda per riflettere i cambiamenti se c'è un cambiamento importante o un'aggiunta nel suo focus. =)

— David dice di ripristinare Monica il

4

Inoltre non hai mai chiuso il divtag con id='container'. Ciò potrebbe causare alcuni problemi.

— Batkins,

@patrick, anche tu non hai il CSS per .clearclasse. L'hai dimenticato o è nel tuo codice originale? La .clearlezione su questo brè molto importante come menziona @jennyfofenny nella loro risposta.

— Cannicidio,

281

Devi forzare a clear:bothprima che il #main_contentdiv sia chiuso. Vorrei probabilmente spostare il <br class="clear" />;nel #main_contentdiv e impostare il CSS per essere:

.clear { clear: both; }

Aggiornamento: questa domanda ottiene ancora una discreta quantità di traffico, quindi volevo aggiornare la risposta con un'alternativa moderna utilizzando una nuova modalità di layout in CSS3 chiamata Box flessibili o Flexbox :

body {
  margin: 0;
}

.flex-container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #3F51B5;
  color: #fff;
}

section.content {
  flex: 1;
}

footer {
  background-color: #FFC107;
  color: #333;
}

<div class="flex-container">
  <header>
    <h1>
     Header   
    </h1>
  </header>

  <section class="content">
    Content
  </section>

  <footer>
    <h4>
      Footer
    </h4>
  </footer>
</div>

Espandi frammento

La maggior parte dei browser moderni attualmente supporta Flexbox e unità viewport , ma se è necessario mantenere il supporto per i browser più vecchi, assicurarsi di verificare la compatibilità per la versione specifica del browser.

— jennyfofenny
fonte

4

Ecco l'articolo di w3schools sulla proprietà clear CSS. Fondamentalmente, clear significa che l'elemento a cui viene applicato il clear inizia sotto i float nel suo flusso (o solo a sinistra, solo a destra o entrambi).

— jennyfofenny,

230

Prova questo: overflow: auto;

Ha funzionato per il mio problema ..

— sipőcz péter
fonte

10

+1, questa soluzione è elegante e non aggiunge un tag invisibile alla tua pagina. Vedi questo violino: jsfiddle.net/XmKrm/1

— Nabil Kadimi,

5

L'auto overflow ha funzionato bene per me. Cordiali saluti, questo aggiungerà una barra di scorrimento se l'altezza del contenitore automatico di troppo pieno è inferiore al contenuto all'interno. Ridimensionalo anche o imposta l'altezza: auto insieme allo sfioro.

— Bryan Myers,

@ Roozbeh15 aggiungere display: block;con esso

— BadAtPHP

2

La soluzione migliore e più semplice ... Mi hai salvato la giornata. Grazie

— Kashyap Kotak il

santo shet questo ha funzionato meravigliosamente. qualcuno si preoccupa di spiegare il meccanismo sottostante del perché questo ha funzionato?

— Merkurial,

86

aggiungere quanto segue:

overflow:hidden;
height:1%;

al tuo div principale. Elimina la necessità di un extra <br />per il chiaro.

— tacca
fonte

Wow! che ha fatto esattamente l'opposto di quello che mi sarei aspettato! overflow: hidden = espandi per adattare il contenuto! non l'avrei mai immaginato!

— Mulllhausen,

Sì, ha funzionato anche per me e non ha perfettamente senso il perché. Qualche spiegazione sul perché "altezza 1%" e "overflow nascosto" funzionano?

— Acarlon

1

davvero come funziona e anche perché funziona, se non viene impostata l'altezza perché l'overflow nascosto non solo nasconde tutto (l'altezza è 0) ma si espande, c'è qualche spiegazione o semplicemente credere ed essere felice?

— Max Yari,

1

overflow: nascosto nasconde le barre di scorrimento ma mantiene le dimensioni del blocco

— authentictech

ha funzionato per me solo con "overflow: nascosto" ma anche "overflow: auto" ha funzionato e non ha mostrato le barre di scorrimento.

— Whirlwind991

60

in alternativa puoi anche provare questo che può essere utile in alcune situazioni

display:table;

jsFiddle

— h0mayun
fonte

24

Vorrei solo usare

height: auto;

nel tuo div. Sì, lo so che sono un po 'in ritardo, ma ho pensato che questo potesse aiutare qualcuno come se mi avrebbe aiutato se fosse qui.

— Charles
fonte

height: auto;fa sì che tutti gli elementi sottostanti si spostino verso l'alto. Con questa proprietà sul mio div contenuto principale, il piè di pagina della mia pagina si sposta verso l'alto in modo che tocchi l'intestazione e si sovrapponga al mio div contenuto.

— Aaron Franke,

1

Questa è stata la soluzione per me. Grazie!

— Nik Hammer-Ellis

14

Ciò che segue dovrebbe funzionare:

.main #main_content {
    padding: 5px;
    margin: 0px;
    overflow: auto;
    width: 100%; //for some explorer browsers to trigger hasLayout
}

— Steerpike
fonte

aggiungendo overflow: auto funzionato, anche se aggiungendo anche width: 100%, il div (#main_content) sarà leggermente più grande di quello del genitore. Non ho capito perché!

— patrick,

2

questo perché l'imbottitura conta in aggiunta alla larghezza specificata, quindi la larghezza del tuo elemento è 100% + 5px imbottitura sinistra + 5px imbottitura destra

— NickV

1

overflow: auto; ha funzionato per me, grazie mille veddy.

— Cosco Tech

9

Modo molto semplice

Sul DIV principale:

height: 100%;

Questo lavoro per me ogni volta

— Daniel Beltrami
fonte

8

Utilizzare il tag span con display:inline-blockCSS collegato ad esso. È quindi possibile utilizzare CSS e manipolarlo come un div in molti modi, ma se non si include un widthoheight si espande e si ritrae in base al suo contenuto.

Spero che aiuti.

— vinaccia scura
fonte

La tua speranza ha funzionato: almeno mi ha aiutato! :) A proposito, ho lasciato il mio elemento come div(invece di a span) ma display: inline-blockho ancora lavorato nel mio caso (Chromium).

— snapfractalpop l'

6

In genere penso che questo possa essere risolto forzando una clear:bothregola sull'ultimo elemento figlio di #items_list.

Puoi usare:

#items_list:last-child {clear: both;}

Oppure, se stai usando un linguaggio dinamico, aggiungi una classe aggiuntiva all'ultimo elemento generato in qualunque ciclo crea l'elenco stesso, quindi finisci con qualcosa nel tuo html come:

<div id="list_item_20" class="last_list_item">

e css

.last_list_item {clear: both; }

— David dice di ripristinare Monica
fonte

6

Questo problema sorge quando gli elementi figlio di un Div padre sono flottati. Ecco l' ultima soluzione del problema:

Nel tuo file CSS scrivi la seguente classe chiamata .clearfix insieme allo pseudo-selettore : after

.clearfix:after {
    content: "";
    display: table;
    clear: both;
}

Quindi, nel tuo HTML, aggiungi la classe .clearfix al tuo Div genitore. Per esempio:

<div class="clearfix">
    <div></div>
    <div></div>
</div>

Dovrebbe funzionare sempre. Puoi chiamare il nome della classe come .group anziché .clearfix , poiché renderà il codice più semantico. Si noti che non è necessario aggiungere il punto o anche uno spazio nel valore del contenuto tra la doppia citazione "". Inoltre, overflow: auto; potrebbe risolvere il problema, ma causa altri problemi come mostrare la barra di scorrimento e non è raccomandato.

Fonte: Blog di Lisa Catalano e Chris Coyier

— Ifti Mahmud
fonte

5

aggiungi una proprietà float al #main_contentdiv - si espanderà quindi per contenere i suoi contenuti fluttuanti

— raggio
fonte

Grazie Ray, ha funzionato anche se ha ridotto il div alla dimensione del suo contenuto (#items_list) che ha larghezza: 400px; La tua soluzione sarebbe davvero buona se potessi fare in modo che #main_content rimanga alla sua massima larghezza - qualche suggerimento?

— patrick,

@Ray 2 e un po 'di anni dopo e questo mi ha appena salvato un potenziale mal di testa con un problema simile. Grazie!

— John H,

4

Prima di fare qualsiasi cosa, controlla le regole CSS con:

{ position:absolute }

Rimuovi se esiste e non ne hai bisogno.

— onalbi
fonte

2

Perché "gli elementi posizionati assoluti vengono rimossi dal flusso, quindi ignorati da altri elementi. Quindi non è possibile impostare l'altezza dei genitori in base a un elemento assolutamente posizionato". stackoverflow.com/questions/12070759/…

— Federico

4

Gli elementi fluttuanti non occupano lo spazio all'interno dell'elemento genitore, poiché il nome suggerisce che galleggiano! Pertanto, se un'altezza non viene esplicitamente fornita a un elemento con i suoi elementi figlio fluttuati, allora l'elemento genitore sembrerà ridursi e sembrerà non accettare le dimensioni dell'elemento figlio, anche se i overflow:hidden;suoi figli potrebbero non apparire sullo schermo. Esistono diversi modi per affrontare questo problema:

Inserire un altro elemento sotto l'elemento flottato con clear:both;la proprietà o l'uso clear:both;sul :afterdell'elemento flottato.
Utilizzare display:inline-block;o flex-boxinvece di float.

— Apoorv Srivastava
fonte

3

Sembra che funzioni

html {
 width:100%;
 height:auto;
 min-height:100%
}

Prende le dimensioni dello schermo come minimo e se il contenuto si espande cresce.

— SubstanceMX
fonte

2

Nel CSS: #clear_div{clear:both;}

Dopo il tag div del div interno aggiungi questo nuovo div seguente

<div id="clear_div"></div>

http://www.w3schools.com/cssref/pr_class_clear.asp : per ulteriori informazioni

— ingrid
fonte

2

Ho aggiunto Bootstrap a un progetto con sectiontag che avevo impostato al 100% dell'altezza dello schermo. Ha funzionato bene fino a quando ho fatto il progetto di risposta, a quel punto ho preso in prestito parte del jennyfofenny 's risposta così la mia sezione sfondo abbinato sfondo del contenuto quando la dimensione dello schermo è cambiato su schermi più piccoli.

Il mio nuovo sectionCSS si presenta così:

section {
    // min-height so it looks good on big screen
    // but resizes on a small-screen
    min-height: 100%;
    min-height: 100vh;
    width:100%;
    width:100vh;
}

Supponiamo che tu abbia una sezione di un certo colore. Usando min-height, se la larghezza della sezione si riduce a causa di uno schermo più piccolo, l'altezza della sezione si espanderà, il contenuto rimarrà all'interno della sezione e lo sfondo rimarrà il colore desiderato.

— Adrian
fonte

2

Hai provato in modo tradizionale? indica l'altezza del contenitore principale: auto

#container{height:auto}

L'ho usato e ha funzionato la maggior parte delle volte con me.

— Michelle Dimwaite
fonte

1

Mi sto imbattendo in questo su un progetto da solo - avevo un tavolo all'interno di un div che si stava riversando dal fondo del div. Nessuna delle correzioni dell'altezza che ho provato ha funzionato, ma ho trovato una strana correzione per questo, e cioè mettere un paragrafo in fondo al div con solo un punto al suo interno. Quindi lo stile del "colore" del testo è lo stesso dello sfondo del contenitore. Ha funzionato come preferisci e non è richiesto javascript. Uno spazio non interrotto non funzionerà, né un'immagine trasparente.

Apparentemente doveva solo vedere che c'è del contenuto sotto la tabella per allungare per contenerlo. Mi chiedo se questo funzionerà per chiunque altro.

Questo è il genere di cose che rende i designer ricorsi a layout basati su tabelle: la quantità di tempo che ho speso per capire queste cose e renderle compatibili con più browser mi sta facendo impazzire.

— Nancy Hastings-Trew
fonte

Deve essere un modo per farlo con CSS, ma non ho idea di cosa sarebbe. Questo ha funzionato per me, ma ho dovuto aggiungere larghezza: 100%; height: auto; min-height: 100%; position: relative;

— RationalRabbit

1

Ho provato questo e ha funzionato

<div style=" position: absolute; direction: ltr;height:auto; min-height:100%">   </div>

— Ahmed Aboelela
fonte

0

Se stai usando l'interfaccia utente di jQuery, hanno già una classe con cui funziona solo un incantesimo aggiungi una <div>nella parte inferiore all'interno del div che vuoi espandere con height:auto; quindi aggiungi un nome di classe ui-helper-clearfix o usa questo attributo di stile e aggiungi come sotto :

<div style=" clear:both; overflow:hidden; height:1%; "></div>

aggiungi la classe UI jQuery al div chiaro, non al div che vuoi espandere.

— Lucas M. Oliveira
fonte

0

So che questo è un po 'vecchio thread, tuttavia, questo può essere ottenuto con la min-heightproprietà CSS in modo pulito, quindi lo lascerò qui per riferimenti futuri:

Ho realizzato un violino basato sul codice OP pubblicato qui: http://jsfiddle.net/U5x4T/1/ , mentre rimuovi e aggiungi div all'interno, noterai come il contenitore si espande o si riduce di dimensioni

Le uniche 2 cose necessarie per raggiungere questo obiettivo, oltre al codice OP sono:

* Overflow nel contenitore principale (richiesto per i div fluttuanti)

* proprietà css di altezza minima, maggiori informazioni disponibili qui: http://www.w3schools.com/cssref/pr_dim_min-height.asp

— Juan Carlos Alpizar Chinchilla
fonte

0

Aggiunto display: in linea con il div ed è cresciuto automaticamente (non il materiale di scorrimento) quando il contenuto di altezza è diventato più grande dell'altezza div impostata di 200px

— Jelle
fonte

1

Questa non è una risposta chiara alla domanda. Per osservazioni, si prega di utilizzare la funzione di commento.

— ksbg

0

È possibile utilizzare il layout griglia CSS . Il supporto al momento è piuttosto ampio: verificalo su caniuse .

Ecco l' esempio su jsfiddle. Esempio anche con tonnellate di roba di testo.

Codice HTML:

<div class="container">
  <div class="header">
   Header
  </div>
  <div class="content">
   Content
  </div>
  <div class="footer">
   Footer
  </div>
</div>

Codice CSS:

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

.container {
  width: 100%;
  height: 100%;

  display: grid;
  grid-template-rows: 100px auto 150px;
  grid-template-columns: auto;
}
// style stuff

— Sharikov Vladislav
fonte

0

Ho provato praticamente tutti i suggerimenti sopra elencati e nessuno di loro ha funzionato. Tuttavia, "display: table" ha fatto il trucco per me.

— PongGod
fonte

-1

Non è necessario utilizzare molti CSS, basta usare bootstrap, quindi usare:

class="container"

per il div che deve essere riempito.

Puoi ottenere bootstrap da qui

— Thadeo Arlo
fonte