CSS - Altezza percentuale dello schermo mobile con CSS

Question

Sto indovinando che la risposta a questo è un no - ma c'è un modo intelligente per calcolare 2/3 dell'altezza dello schermo mobile?

Ho bisogno di un header div che contenga un'immagine di sfondo per occupare 2/3 dell'altezza dello schermo indipendentemente dal dispositivo - se possibile, una soluzione CSS pulita sarebbe l'ideale.

Attualmente ho

<div class="twoThirds"> 
     <img src="headerimg.jpg" /> 
    </div> 

e le seguenti stili MENO -

.twoThirds{ 


height:66%; 
@media (max-width: 766px) { 
    height:200px; 
} 
margin:0; 
padding:0; 
width:auto; 

img{ 

    width:100%; 
    height:auto; 

} 

} 

Answer 1

Se da schermo vuoi dire piuttosto viewport allora si potrebbe utilizzare le unità viewport

.twoThirds { 
    height: 66.6vh; 
} 

Dove 1vh è 1/100 dell'altezza della finestra e 100vh è l'altezza della finestra completa.
supporto attraverso il browser: http://caniuse.com/#feat=viewport-units

Per i dispositivi meno recenti, in cui queste unità non sono (completamente) supportato, una possibile soluzione è assegnare height: 100% agli elementi html e body e height: 66.6% all'elemento .twoThird