<div class="container">
  <div class="vh">
    <p>
      <em>Note: if you resize the viewport in a webkit-based browser, you will need to refresh the page to see the dimensions update.</em>
    </p>
    <p>The following element will always be 50% height of the viewport.</p>
    <div class="element element-1">

    </div>
    <p>The following element will always be 25% height of the viewport.</p>
    <div class="element element-2">

    </div>
  </div>

  <p>The following element will always be 50% width of the viewport.</p>
  <div class="element element-3">

  </div>
  <p>The following element will always be 25% width of the viewport.</p>
  <div class="element element-4">

  </div>

  <p>The following element's width will always be the size of the smaller of the viewport's dimensions. (may not work in your browser)</p>
  <div class="element element-5">

  </div>
  <p>The following element's width will always be the size of the bigger of the viewport's dimensions. (may not work in your browser)</p>
  <div class="element element-6">

  </div>
</div>
body {
  background-color: #fff;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.element {
  padding: 20px;
  background-color: #0099cc;
  color: white;
  margin: 0 50px;
}

.element-1 {
  height: 50vh;
  width: 300px;
}

.element-2 {
  height: 25vh;
  width: 300px;
}

.vh {
  overflow: hidden;
}

.element-3 {
  width: 50vw;
  height: 20px;
}

.element-4 {
  width: 25vw;
  height: 20px;
}

.element-5 {
  width: 100vmin;
}

.element-6 {
  width: 100vmax;
}