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

Sto avendo uno strano problema piuttosto strano. Il problema è piccolo: voglio impostare l’altezza minima al 100%, ovvero il contenuto della pagina dovrebbe estendersi all’intero schermo dell’utente e, se ansible, 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.

Per favore aiutami qui è 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/

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

I figli di elementi min-height impostata al 100% non possono ereditare l’altezza dei genitori in percentuale …

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

Specifiche CSS2.1:

La percentuale viene calcasting rispetto all’altezza del blocco contenitore della casella generata. Se l’altezza del blocco contenitore non è specificata esplicitamente (cioè dipende dall’altezza del contenuto), e questo elemento non è posizionato in modo assoluto, il valore calcola su ‘auto’.

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