title: Declaring two min-height properties
body: <p>I am working on a site where certain sections have 100% height. To achieve this I am using the new css3 unit <a href="http://dev.w3.org/csswg/css-values/#viewport-relative-lengths" rel="nofollow">vh</a> as a <code>min-height</code> (100vh).</p>
  
  <p>In each section there is also a element which is absolute positioned and aligned with the bottom of the page. You can see an example of it <a href="http://jsfiddle.net/nwHB4/" rel="nofollow">here</a>.</p>
  
  <p>The problem which occurs is that on a smaller screen the button shows up upon the text.
  I know that I could e.g. let the button disappear on smaller screens with <code>@media</code>; instead I would like to know if there is a css3 possibility in doing something like this:</p>
  
  <pre><code>.element {
    min-height: 100vh &amp;&amp; 200px;
  }
  </code></pre>
  
  <p>Any other css tricks too achieve this are also appreciated (I can change the markup).</p>