CodePen Embed - CSS 80vh vs 80%

<div class="random">

  <div class="i-am-fixed">
    <a href="http://caniuse.com/#search=vh" target="_blank">Can i use?</a><br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
    I have max-height: 80vh<br/>
  </div>
  <div class="i-am-fixed2">
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
    I have max-height: 80%<br/>
  </div>

  Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text. Random text.
</div>

body{
  margin:0;
  padding:0;
}
div.i-am-fixed{
  max-height: 80%;
  max-height: 80vh;
  width:50%;
  position:absolute;
  text-align:center;
  text-align:center;
  background:#009ee9;
  font-size:30px;
  overflow:auto;
  color:#fff;
  border-bottom:1px solid #333;
  opacity:0.9;
  left:0;
  a{
    color:#fff;
    text-decoration:underline;
  }
}
div.i-am-fixed2{
  max-height: 80%;
  width:50%;
  position:absolute;
  text-align:center;
  text-align:center;
  background:#009ee9;
  font-size:30px;
  overflow:auto;
  color:#fff;
  border-bottom:1px solid #333;
  opacity:0.9;
  right:0;
}
.random{
  font-size:30px;
  position:relative;
}

View Compiled

This Pen is owned by saintjon on CodePen.

See more by @saintjon on CodePen

External CSS

https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.