Div altezza 100% e si espande per adattarsi al contenuto

Ho un elemento div sulla mia pagina con la sua altezza impostata al 100%. Anche l'altezza del corpo è impostata al 100%. Il div interno ha uno sfondo e tutto ciò che è diverso dallo sfondo del corpo. Questo funziona per rendere l'altezza div al 100% dell'altezza dello schermo del browser, ma il problema è che ho contenuti all'interno di quel div che si estende verticalmente oltre l'altezza dello schermo del browser. Quando scorro verso il basso, il div termina nel punto in cui hai dovuto iniziare a scorrere la pagina, ma il contenuto trabocca oltre. Come faccio a far sì che il div vada sempre fino in fondo per adattarsi al contenuto interno?

Ecco una semplificazione del mio CSS:

body {
    height:100%;
    background:red;
}

#some_div {
    height:100%;
    background:black;
}

Una volta che scorro la pagina, l'oscurità termina e il contenuto scorre sullo sfondo rosso. Non sembra importare se ho impostato la posizione su relativa o assoluta su #some_div, il problema si verifica in entrambi i casi. Il contenuto all'interno di #some_div è per lo più posizionato in modo assoluto ed è generato dinamicamente da un database, quindi la sua altezza non può essere conosciuta in anticipo.

Modifica: ecco uno screenshot del problema:

Ecco cosa dovresti fare in stile CSS, principalmente div

display: block;
overflow: auto;

E non toccare height

Impostare heighta autoe min-heighta 100%. Questo dovrebbe risolverlo per la maggior parte dei browser.

body {
  position: relative;
  height: auto;
  min-height: 100% !important;
}

Di solito questo problema sorge quando gli elementi figlio di un genitore div vengono 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

Se si lascia il height: 100%e utilizzare display:block;l' divavrà tanto spazio quanto il contenuto all'interno della div. In questo modo tutto il testo rimarrà sullo sfondo nero.

Questa domanda potrebbe essere vecchia, ma merita un aggiornamento. Ecco un altro modo per farlo:

#yourdiv {
    display: flex;
    width:100%;
    height:100%;
}

Prova questo:

body { 
    min-height:100%; 
    background:red; 
} 

#some_div {
    min-height:100%; 
    background:black; 
} 

IE6 e le versioni precedenti non supportano la proprietà di altezza minima.

Penso che il problema sia che quando si dice al corpo di avere un'altezza del 100%, il suo sfondo può essere alto solo come il hieght di un "viewport" del browser (l'area di visualizzazione che esclude le barre degli strumenti del browser e le barre di stato e le barre dei menu e il bordi della finestra). Se il contenuto è più alto di una finestra, traboccherà l'altezza dedicata allo sfondo.

Questa proprietà di altezza minima sul corpo dovrebbe FORZARE che lo sfondo sia alto almeno quanto una finestra se il contenuto non riempie l'intera pagina fino in fondo, ma dovrebbe anche lasciarlo crescere verso il basso per includere più contenuti interni.

Vecchia domanda, ma nel mio caso ho scoperto che l'ho position:fixedrisolto per me. La mia situazione potrebbe essere stata leggermente diversa. Avevo un semitrasparente sovrapposto divcon un'animazione di caricamento che avevo bisogno di essere visualizzato durante il caricamento della pagina. Quindi usando height:auto / 100%o min-height: 100%entrambi riempivo la finestra ma non l'area fuori dallo schermo. Utilizzando position:fixedfatto questo overlay scorrere con l'utente, in modo da coprire sempre l'area visibile e mantenere la mia animazione di precaricamento centrata sullo schermo.

Aggiungi queste due righe nel tuo ID CSS #some_div

display: block;
overflow: auto;

Dopodiché otterrai ciò che stai cercando!

Non sono del tutto sicuro di aver capito la domanda perché questa è una risposta abbastanza semplice, ma qui va ... :)

Hai provato a impostare la proprietà di overflow del contenitore su visibile o automatico?

#some_div {
    height:100%;
    background:black; 
    overflow: visible;
    }

L'aggiunta di ciò dovrebbe spingere il contenitore nero a qualsiasi dimensione richiesta dal contenitore dinamico. Preferisco visibile ad auto perché auto sembra venire con barre di scorrimento ...

I browser moderni supportano l'unità "viewport height". Questo espanderà il div all'altezza della finestra disponibile. Lo trovo più affidabile di qualsiasi altro approccio.

#some_div {
    height: 100vh;
    background: black;
}

Anche tu puoi fare così

display:block;
overflow:auto;
height: 100%;

Ciò includerà ogni tuo div dinamico secondo il contenuto. Supponiamo che se hai un div comune con classe aumenterà l'altezza di ogni div dinamico in base al contenuto

Puoi anche usare

 display: inline-block;

il mio ha lavorato con questo

OVERLAY SENZA POSIZIONE: FISSO

Un modo davvero interessante che ho capito per un menu recente è stato impostare il corpo su:

position: relative

e imposta la tua classe wrapper in questo modo:

#overlaywrapper {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: #00000080;
    z-index: 100;
}

Ciò significa che non è necessario impostare la posizione fissa e consentire comunque lo scorrimento. L'ho usato per i menu sovrapposti che sono DAVVERO grandi.

usa la flessibilità

.parent{
    display: flex
}

.fit-parent{
    display: flex;
    flex-grow: 1
}

Ok, ho provato qualcosa del genere:

corpo (normale)

#MainDiv { 
  /* where all the content goes */
  display: table;
  overflow-y: auto;
}

Non è il modo esatto per scriverlo, ma se fai div il display principale come una tabella, si espande e quindi ho implementato le barre di scorrimento.