title: CSS - Percentage height of mobile screen with CSS
body: <p>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?</p>
  
  <p>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.</p>
  
  <p>Currently I have </p>
  
  <pre><code>    &lt;div class="twoThirds"&gt;
          &lt;img src="headerimg.jpg" /&gt;  
      &lt;/div&gt;
  </code></pre>
  
  <p>and the following LESS styles - </p>
  
  <pre><code>.twoThirds{
  
  
  height:66%;
  @media (max-width: 766px) {
      height:200px;
  }
  margin:0; 
  padding:0;
  width:auto;
  
  img{
  
      width:100%;
      height:auto;
  
  }
  
  }
  </code></pre>