CSS - Wysokość procentowa ekranu mobilnego z CSS

Question

Zgaduję, że odpowiedź na to pytanie jest nie - ale czy istnieje sprytny sposób obliczenia wysokości 2/3 ekranu mobilnego?

Potrzebuję nagłówka div zawierającego obraz tła, który zajmie 2/3 wysokości ekranu niezależnie od urządzenia - jeśli to w ogóle możliwe, idealnym rozwiązaniem będzie tylko CSS.

Obecnie mam

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

oraz następujące LESS Style -

.twoThirds{ 


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

img{ 

    width:100%; 
    height:auto; 

} 

} 

Answer 1

Jeśli autorem ekran znaczy raczej rzutni następnie można użyć rzutni jednostkom

.twoThirds { 
    height: 66.6vh; 
} 

Gdzie 1vh jest 1/100 o wysokości rzutni i 100vh jest pełną wysokością rzutni.
Pomoc całej przeglądarki: http://caniuse.com/#feat=viewport-units

dla starszych urządzeń, w których jednostki te nie są (w pełni) wsparciem, możliwe obejście jest przypisanie height: 100% do html i body elementów i height: 66.6% do elementu .twoThird