html 다이나믹 웹 페이지의 무한한 스크롤

Question

요소를 추가 할 때 치수가 변하는 무한 스크롤 페이지를 구현하려고합니다. 여기에 의미를 설명하는 이미지가 있습니다. 필요하다면 나도 그들을 추가 할 수 있도록

CSS 많이 있습니다.

감사

Answer 1

싶은 것은 :

1. 이 헤더를 지정하고 정의 된 높이와 함께 fixed position 바닥 글.

2. 본체에 auto overflow과 머리글과 바닥 글의 높이를 같게하십시오.

아마도이 example은 방향을 알려줍니다. 당신은 당신이 ... 여기에 게시 섹션에 http 읽기 후 작성하는 코드에 대한 실제 특정 질문이있는 경우 .... 당신을 위해

<header id="header-container"> 
    <div id="site-header"> 
     Site Header 
    </div> 
    <div id="main-header"> 
     Main Header 
    </div> 
</header> 
<footer id="footer-container"> 
    <div id="main-footer"> 
     Main Footer 
    </div> 
    <div id="site-footer"> 
     Site Footer 
    </div> 
</footer> 
<main id="main-body"> 
    Main Body 
    <ul> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
     <li>Item</li> 
    </ul> 
</main> 

html, body { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#header-container { 
    position: fixed; 
    top: 0; 
    width: 100%; 
    height: 150px; /* 100px for site header, 50px for main header. */ 
} 

#site-header { 
    background-color: #eee; 
    height: 100px; 
} 

#main-header { 
    background-color: #cce; 
    height: 50px; 
} 

#footer-container { 
    position: fixed; 
    bottom: 0; 
    width: 100%; 
    height: 75px; /* 50px for site footer, 25px for main footer. */ 
} 

#site-footer { 
    background-color: #eee; 
    height: 50px; 
} 

#main-footer { 
    background-color: #cce; 
    height: 25px; 
} 

#main-body { 
    margin: 150px 0 75px; /* 50px on top, 50px on bottom*/ 
    overflow: auto; 
}