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

【问题标题】：Auto scaling DIV element and taking into account header and footer until scroll自动缩放 DIV 元素并考虑页眉和页脚直到滚动
【发布时间】：2014-11-05 02:21:29
【问题描述】：

斜线高度：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%;}

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

【问题讨论】：

标签： javascript html css responsive-design

【解决方案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>

【讨论】：