자동 DIV 요소를 확장하고 스크롤

Question

Slashpage 높이까지 계정 머리글과 바닥 글을 고려 : 100 %

나는 화면을 채울 것입니다 시작 페이지을 시도하지만 계정에 머리글과 바닥 글의 크기를 가지고있어 . 바닥 글과 머리글은 고정 위치가 아니지만 바닥 글이 맨 위에 도달하면 바닥 글이 고정됩니다 : 0; 실제로 여러 장치에서 작동하도록 스플래시 화면을 얻으려고 시도 할 때까지 소리가 잘 들립니다. CSS 미디어 쿼리를 시도했지만 페이지를 처음 방문했을 때 브라우저의 높이를 모니터링하기 위해 실제로 자바 스크립트가 필요하다고 생각합니다. 참고 : 나는 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

기본적 I는 절대적 페이지의 상단과 하단에 하부 메뉴로 상위 메뉴의 위치를 ​​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>