javascript - Properly working with div heights - vh -

i have interesting issue revolving around page. should happen see nice red box on video, , inside box link buttons when clicked load text external file, , put 1 of sub divs. text shouldn't overflow box, , box should stretch bottom of viewport. issue works terribly on different devices. if have long chapter, , you're in smaller browser, can scroll down, can't scroll top.

i looked many solutions, can see - followed countless stack overflow posts, somehow, sense issue may lie deeper in css, somehow i'm doing wrong. if take , maybe me down right track this, i'd appreciate it! in advance!

 html, body{     height: 100%;  }  .box{     background-color: rgba(112, 0 , 0, .85);     width: 60%;     height: 100vh;     overflow: hidden;     /* http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */     position: relative;     top: 50%;     transform: translatey(-50%);     -webkit-transform: translatey(-50%);     -ms-transform: translatey(-50%);     margin-left: auto;     margin-right: auto;     text-align: center;     border-radius: 10px;     color: white;     font-family: 'quicksand', sans-serif; } #storybox{     width: 90vw;     min-height: 100vh;     height: 100%; } #storyc{     display: inline-block; } .no_box{     height: 50vh; } .link_box{     height: 100vh; } .link_box a:link {     text-decoration: none;     color: white;        } .link_box a:visited {     text-decoration: none;     color: white;        } #storybox a:link {     text-decoration: none;     color: white; } #storybox a:visited {     text-decoration: none;     color: white; } .link_box ul{     list-style-type: none;     position: relative;     top: 50%;     transform: translatey(-50%);     -webkit-transform: translatey(-50%);     -ms-transform: translatey(-50%);     line-height: 400%; } .box ul{     list-style-type: none;     position: relative;     top: 50%;     transform: translatey(-50%);     -webkit-transform: translatey(-50%);     -ms-transform: translatey(-50%);     line-height: 400%; } .large_text{     font-size: 24px; } .title_text{     font-size: 48px; } .left_align{     text-align: left; } #big-video-wrap{     z-index: -1; }  #storybox{     display: none; }  #story{     text-align: left; }  /* http://sixrevisions.com/css/disable-text-selection/ */ .no-select {     -moz-user-select: none; /* firefox */     -ms-user-select: none; /* internet explorer */     -khtml-user-select: none; /* khtml browsers (e.g. konqueror) */     -webkit-user-select: none; /* chrome, safari, , opera */     -webkit-touch-callout: none; /* disable android , ios callouts*/  } 

js:

    function getcookie(cname) { //http://www.w3schools.com/js/js_cookies.asp         var name = cname + "=";         var ca = document.cookie.split(';');         for(var i=0; i<ca.length; i++) {             var c = ca[i];             while (c.charat(0)==' ') c = c.substring(1);             if (c.indexof(name) == 0) return  c.substring(name.length,c.length);     }     return ""; } //the 1 , cookie (we can expand later if need be.) $(document).ready(function(){     if (!getcookie("landed")){         window.location.assign("./landing.php");     }     $("#links").on('click', 'a', function(){         $("#storybox").css("display", "none");         var chapter = $(this).attr("data-chnum");         $("#chaptertitle").html("chapter " + chapter);         $.ajax({         url: "chapters/ch" + chapter + ".php#story",         success: function(res){         $("#links").css("visibility", "hidden");         $("#storyc").html(res + "<p><b><a href='#links'>return</a></b></p>");          $("#storybox").slidedown(800);         $('html, body').animate({ scrolltop: 0 }, 'fast');         },         statuscode: {         404: function(){             $("#storyc").html("<p>error, chapter not found!</p><p><b><a href='#links'>return</a></b></p>");             $("#storybox").slidedown(800);         }         },         async: false,         });     return true; });     $("#storyc").on('click', 'a', function(){     $("#links").css("visibility", "visible");     $("#storybox").css("display", "none");     $('html, body').animate({ scrolltop: 0 }, 'fast');     $("#storyc").html("");     }); }); $(function() {     var bv = new $.bigvideo();     bv.init();     bv.show('https://vjs.zencdn.net/v/oceans.mp4',{ambient:true}); }); 

html:

 <!doctype html>  <html>  <head>      <meta http-equiv="content-type" content="text/html;charset=utf-8">      <link href='https://fonts.googleapis.com/css?family=quicksand:400,300,700' rel='stylesheet' type='text/css'>      <link href='js/bigvideo/css/bigvideo.css' rel='stylesheet' type='text/css'>      <link href='css/styles.css?1457332650' rel='stylesheet' type='text/css'>      <script data-rocketsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js" type="text/rocketscript"></script>      <script data-rocketsrc="js/video-js/video.js" type="text/rocketscript">       </script>      <script data-rocketsrc="js/bigvideo/lib/bigvideo.js" type="text/rocketscript"></script>      <script data-rocketsrc="js/application.js?1457332650" type="text/rocketscript"></script>      <title>----------------</title> </head> <body>     <div class='no_box'></div>     <div class='box link_box no-select' id='links'>         <ul id='linksul'>             <li class='large_text'>&copy; 2016 -------------</li>             <li class='large_text'><a href='#storybox' data-chnum='i'>dedication</a></li>             <li class='large_text'><a href='#storybox' data-chnum='i'>chapter i</a></li>             <li class='large_text'><a href='#storybox' data-chnum='ii'>chapter ii</a></li>             <li class='large_text'><a href='#storybox' data-chnum='iii'>chapter iii</a></li>             <li class='large_text'><a href='#storybox' data-chnum='iv'>chapter iv</a></li>             <li class='large_text'><a href='#storybox' data-chnum='v'>chapter v</a></li>             <li class='large_text'><a href='#storybox' data-chnum='next'>next</a></li>      </ul> </div> <div class='no_box'></div> <div id='storybox' class='box'>     <p class='large_text' id='chaptertitle'>chapter:</p>     <div id='storyc'></div> </div>