come si imposta l'altezza del contenitore DIV al 100% dell'altezza della finestra?

Question

Ho un paio di problemi con il mio contenitore DIV. Ad esempio, non riconosce correttamente l'altezza del mio contenuto (avrei pensato che si estendesse oltre la parte inferiore del contenuto principale e della barra laterale, ma non lo è). Puoi vedere cosa intendo su this page.

Vorrei anche che il contenitore DIV riempia sempre l'altezza disponibile dello schermo/finestra. Ho provato a impostarlo su min-height:100%, ma questo non ha avuto alcun effetto.

Ecco il CSS che sto usando per il div contenitore:

#container { 
    padding: 0; 
    margin: 0; 
    background-color: #292929; 
    width: 1200px; 
    margin: 0 auto; 
    min-height: 100%; 
} 

sarei grato per qualsiasi aiuto per ottenere questo lavoro.

Grazie,

Nick

Answer 1

Aggiungi questo alla tua CSS:

html, body { 
    height:100%; 
} 

Se dici altezza: 100%, vuoi dire 'il 100% dell'elemento genitore'. Se l'elemento genitore non ha un'altezza specificata, non succederà nulla. Hai impostato solo il 100% sul corpo, ma devi anche aggiungerlo a html.

Answer 2

Forse si imposta il CSS:

html, body 
{ 
    height: 100%; 
} 

hai bisogno di questo per essere in grado di rendere il div occupano tutto lo spazio. :)

Answer 3

È possibile NET impostarlo per visualizzare l'altezza

html, body 
{ 
    height: 100vh; 
} 

Answer 4

html { 
    min-height: 100%; 
} 

body { 
    min-height: 100vh; 
} 

Il html height (%) si prenderà cura di l'altezza dei documenti che è height è più di un 100% del screen view mentre il body view height (vh) prenderà cura dell'altezza del documento che è inferiore all'altezza della schermata.