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

Question

斜线高度:100%

我正在尝试制作一个将填满屏幕但要考虑页眉和页脚大小的初始页面。页脚和页眉位置不固定，当页脚到达top: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>