2014-12-02 8 views
59

Ho seguente regola CSS in un file di Meno:È possibile utilizzare vh meno i pixel in un calc CSS()?

.container { 
    min-height: calc(100vh - 150px); 
} 

che non funziona affatto. Voglio rendere l'altezza della finestra piena del contenitore e l'intestazione meno, l'altezza fissa del piè di pagina. Come lo posso fare?

+2

Sembra funzionare - http://jsfiddle.net/ gz4zp1ua/2/ –

+1

Assicurati che il browser in questione supporti effettivamente ciò che stai chiedendo: http://caniuse.com/#feat=calc e http://caniuse.com/#feat=viewport-units. – cimmanon

+0

L'ho chiuso come un duplicato perché quel thread contiene anche dettagli sulle opzioni aggiornate che potrebbero essere utili per gli altri (oltre a questo, anche la domanda ha un maggior numero di visualizzazioni e di voti). – Harry

risposta

127

Funziona davvero. Il problema era con il mio meno compilatore. E 'stato compilato a:

.container { 
    min-height: calc(-51vh); 
} 

fissa con il seguente codice nel file di meno:

.container { 
    min-height: calc(~"100vh - 150px"); 
} 

Grazie a questo link: Less Aggressive Compilation with CSS3 calc

+0

Questo ha fatto il trucco! Grazie – yngrdyn

+10

morso da questo. Nel caso in cui tu abbia bisogno di usare variabili all'interno della stringa, puoi farlo in questo modo: 'calc (~" 100vh - @ {navbar-height} ")' –

+1

Trucco perfetto, grazie a te! Mi sono chiesto perché funzioni in .css ma non in .less – Destunk

Problemi correlati