Consider this:
<!DOCTYPE html>
<html>
<style>
.container{position: fixed; width: 100%;height: 100%; left: 0; top: 0; z-index: 10;background-color: grey}
.header{height: 50px; width:100%;padding:10px;background-color: lightgrey;}
.nav{height: 50px; width:100%;padding:10px; background-color: darkgrey}
.content{height: 100%; width:100%; overflow-y: scroll}
.item{padding:20px;}
body {font-size: 32px; font-family: Arial, Helvetica, sans-serif;}
</style>
<body>
<div class='container'>
<div class='header'>this is the header</div>
<div class='nav'>This is the nav</div>
<div class='content'>
<div class='item'>I love chips 1</div>
<div class='item'>I love chips 2</div>
<div class='item'>I love chips 3</div>
<div class='item'>I love chips 4</div>
<div class='item'>I love chips 5</div>
<div class='item'>I love chips 6</div>
<div class='item'>I love chips 7</div>
<div class='item'>I love chips 8</div>
<div class='item'>I love chips 9</div>
<div class='item'>I love chips 10</div>
<div class='item'>I love chips 11</div>
<div class='item'>I love chips 12</div>
<div class='item'>I love chips 13</div>
<div class='item'>I love chips 14</div>
<div class='item'>I love chips 15</div>
</div>
</div>
</body>
</html>
The content div has a 100% height, as does the container. However the content in the 'content' div does not allow me to scroll all the way to the bottom. It seems to be offset by the 'header' and 'nav' heights, but it is hidden off the bottom of the screen. I have found a workaround where I give the 'content' div some 'padding-bottom' to push the content back up, however the scroll bar now disappears off the bottom of the browser :(
How can I make the 'content' div have a 100% height (i can't use a fixed height as the whole thing needs to fill the browser width & height) and make sure the scroll bar and content can be seen ?
thanks in advance!
So after much testing and looking around I worked out the answer myself! Anyone looking to solve the same issue can do it with the following method.
Using SASS or CSS Variables set the heights of all elements above your scroll container. Using calc add the total of these heights up into one total. Then using this total and calc, subtract that amount from 100% of the viewport height. Something like the below
--header-hold-height: 64px;
--tab-hold-height: 56px;
--filter-hold-height: 64px;
--total-top-nav-height: calc(var(--header-hold-height) + var(--tab-hold-height) + var(--filter-hold-height));
.scroll-container {
height: calc(100vh - var(--total-top-nav-height));
overflow-x: hidden;
position: relative;
overflow-y: scroll;
}