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

Question

Slashpage高度：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％的高度，然后在页面的顶部和底部的底部菜单绝对定位顶级菜单。我在splash页面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>