L'altezza CSS funziona ma l'altezza minima non funziona

Question

Sto avendo uno strano problema piuttosto strano. Il problema è piccolo: voglio impostare l'altezza minima al 100%, ovvero il contenuto della pagina dovrebbe occupare tutto lo schermo dell'utente e, se possibile, la pagina dovrebbe estendersi se il contenuto supera il 100%. Un modo semplice sarebbe quello di impostare l'altezza minima: 100% e impostare l'altezza: auto che è esattamente quello che voglio ma indipendentemente da quante volte lo provo il problema rimane lì.

Sto usando altezza automatica e altezza minima: 100% su tutti gli elementi ma non funziona. Se rimuovo l'altezza minima per includere solo l'altezza: 100%, allora funziona come un incantesimo, ma quando il contenuto è più grande, trabocca tutto il piè di pagina.

Please help me qui sono i CSS:

html, body, container, row, col-lg-3, col-lg-9 { 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.container { 
    max-width: 1170px; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
} 
.col-lg-3 { 
    min-height:100%; 
    height:100%; 
} 
.col-lg-9 { 
    min-height: 100%; 
    height: 100%; 
} 

Ecco la pagina che mostra il problema: http://contestlancer.com/ai/GP/

Answer 1

Sì, questo è un dolore, ma è così che funziona. L'altezza può essere ereditata dai genitori posizionati ma non quando questi hanno una proprietà min-height.

Figli di elementi che hanno una serie di min-height100% non possono ereditare l'altezza dei loro genitori tramite percentuale ...

https://stackoverflow.com/a/8468131/1491212

CSS2.1 specifiche:

La percentuale è calcolata rispetto all'altezza del blocco contenente la casella generata da . Se l'altezza del blocco contenente non è specificata esplicitamente (vale a dire, dipende dall'altezza del contenuto ) e questo elemento non è posizionato in modo assoluto, il valore calcola su "auto".

Usa position: relative; height: 100% sui contenitori per aggirare il problema, e aggiungere min-height: 100%; al bambino più profondo.