自动缩放DIV元素并考虑页眉和页脚直到滚动

Question

Slashpage height：100％

我尝试制作一个可以填充屏幕的启动页面，但要考虑页眉和页脚的大小。页脚和页眉不是固定位置，但页脚到达顶部时页脚会变粘：0;一切听起来都不错，直到我真的试图让启动屏幕在多个设备上运行，我尝试过CSS媒体查询，但我相信我确实需要一个javascript来监控首次访问该页面时浏览器高度的变化。 注意：我已经看了How to make the web page height to fit screen height，但似乎没有提到滚动的可能性。

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

因此，启动页面应该将屏幕固定在顶部和底部栏之外，然后用户可以向下滚动并查看页面的其余部分。下面的图片是为了证明我的意思。

Answer 1

基本上，我将启动页面设置为100％高度，然后将顶部菜单放在页面顶部，底部菜单放在底部。我在起泡页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>