<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;
}

External CSS

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

External JavaScript

This Pen doesn't use any external JavaScript resources.