CSS - Percentage height of mobile screen with CSS

Question

I'm guessing the answer to this is a no - but is there a clever way to calculate 2/3 height of the mobile screen?

I need a header div containing a background image to take up 2/3 of the screen height regardless of device - if at all possible a clean CSS only solution would be the ideal.

Currently I have

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

and the following LESS styles -

.twoThirds{


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

img{

    width:100%;
    height:auto;

}

}

Answer 1

If by screen you mean rather viewport then you could use viewport units

.twoThirds {
   height: 66.6vh;
}

Where 1vh is 1/100 of the viewport height and 100vh is the full viewport height.
Support across browser: http://caniuse.com/#feat=viewport-units

For older devices, where these units are not (fully) supported, a possible workaround is to assign height: 100% to the html and body elements and height: 66.6% to the .twoThird element