Soluzioni CSS per Viewport Unità CSS?

Da quanto ho visto in altre risposte , non è ancora ansible utilizzare le unità viewport CSS in calc() . Quello che vorrei ottenere è la seguente dichiarazione:

 height: calc(100vh - 75vw) 

C’è qualche modo per aggirare questo problema usando puramente CSS anche se le unità viewport non possono essere utilizzate calc() ? O solo CSS e HTML? So che posso farlo in modo dinamico usando javascript, ma preferirei CSS.

    Prima di rispondere a questo, vorrei sottolineare che Chrome e IE 10+ supporta effettivamente calc con unità viewport.

    FIDDLE (in IE10 +)

    Soluzione (per altri browser): ridimensionamento della scatola

    1) Inizio impostando l’altezza come 100vh.

    2) Con il ridimensionamento della scatola impostato su border box, aggiungere un padding-top di 75vw. Ciò significa che l’imbottitura sarà parte f l’altezza interna.

    3) Basta compensare il padding in eccesso con un margine negativo in alto

    VIOLINO

     div { /*height: calc(100vh - 75vw);*/ height: 100vh; margin-top: -75vw; padding-top: 75vw; -moz-box-sizing: border-box; box-sizing: border-box; background: pink; } 

    Come soluzione alternativa, è ansible utilizzare il fatto che la percentuale di riempimento verticale e il margine sono calcolati dalla larghezza del contenitore. È una soluzione abbastanza brutta e non so se sarai in grado di usarlo ma, funziona: http://jsfiddle.net/bFWT9/

     < !DOCTYPE html>      
    It works!

     html, body, div { height: 100%; } body { margin: 0; } div { box-sizing: border-box; margin-top: -75%; padding-top: 75%; background: #d35400; color: #fff; } 
     
    It's working fine.....
    div { height: calc(100vh - 8vw); background: #000; overflow:visible; color: red; }

    Controlla qui questo codice css adesso supporta tutti i browser senza Opera

    basta controllare questo

    Vivere

    vedi Anteprima dal vivo di jsfiddle

    Guarda l’anteprima dal vivo di codepen.io