Auto scaling DIV element and taking into account header and footer until scroll

Question

Slashpage height:100%

I'm attempting to make a splash page that will fill the screen but taking into account the size of the header and footer. The footer and header are not fixed position but footer will become sticky when the footer reaches top:0; all sounds good until I actually attempt to get the splash screen to function on multiple devices, I've attempted CSS media queries but believe I actually need a javascript to monitor changes to the height of the browser when the page is first visited. NOTE: I've taken a look at How to make the web page height to fit screen height but doesn't seem to mention the possiblity of scrolling.

HTML:

 <nav class="top-menu">
    <ul>
        <li>Top Button 1</li>
        <li>Top Button 2</li>
        <li>Top Button 3</li>
    <ul>
</div>
<div class="splashpage">

</div>
<nav class="bottom-menu">
    <ul>
        <li>Bottom Button 1</li>
        <li>Bottom Button 2</li>
        <li>Bottom Button 3</li>
    <ul>
</div>
<div class="the-rest-of-the-page">

</div>

CSS

.top-menu{width:100%;height:40px;}
.bottom-menu{width:100%;height:40px;}
.splashpage{height:100%;height:100%;}
.the-rest-of-the-page{width:100%;}

So the splash page should fix the screen apart from the top and bottom bar, then user can then scroll down and see the rest of the page. Below is an image to demonstrate what I mean.

Answer 1

Basically, I am setting the splash page to 100% height then absolutely positioning the top menu at the top of the page and the bottom menu at the bottom. I'm accounting for the heights of the menus with padding on the top and bottom of the splash page div.

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  display: inline;
}
.top-menu,
.bottom-menu {
  width:100%;
  height:40px;
  position: absolute;
}
.top-menu {
  background: blue;
  top: 0;
}
.bottom-menu{
  background: green;
  bottom: 0;
}
.splashpage{
  height:100%;
  padding: 40px 0;
}
.the-rest-of-the-page{
  width:100%;
  min-height: 500px;
  background: yellow;
}

 <nav class="top-menu">
    <ul>
        <li>Top Button 1</li>
        <li>Top Button 2</li>
        <li>Top Button 3</li>
    <ul>
</nav>
<div class="splashpage">
splash page content
</div>
<nav class="bottom-menu">
    <ul>
        <li>Bottom Button 1</li>
        <li>Bottom Button 2</li>
        <li>Bottom Button 3</li>
    <ul>
</nav>
<div class="the-rest-of-the-page">
rest of the page content
</div>