自動縮放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>