오버 플로우되도록 요소의 높이를 동적으로 설정 : 자동?

Question

나는 페이지의 나머지 부분을 정적으로 유지하면서 스크롤하고 싶은 요소가 길다.

<header> 
    <!-- the header is stuck to the top of the page --> 
</header> 
<ul class="list"> 
    <!-- long list of stuff which should scroll --> 
    <li></li> 
    <li></li> 
    <li></li> 
    <li></li> 
    <!-- ... and so on, hundreds of elements --> 
</ul> 
<footer> 
    <!-- the footer is stuck to the bottom of the page --> 
</footer> 

지금이 한 나는 <ul>에 높이를 설정으로 작동하는 것 같다.

ul.list { 
    overflow: auto; 
    height: 700px; 
} 

문제는 사용자의 브라우저 인 경우보다 키가 700px + [header height] + [footer height] 다음 ul.list 그것이 가능한 공간의 모든 차지하지 것입니다. 목록과 바닥 글 사이에 간격이 있습니다. 반대로 사용자의 브라우저가 700px보다 작 으면 일부 목록 요소가 페이지 아래쪽에 표시되지 않습니다.

목록을 사용 가능한 높이를 모두 차지하게하려면 어떻게해야합니까? 지금까지 생각할 수

유일한 방법은 $header.offset() 및 $footer.offset()를 발견하여 사이의 거리를 얻기 위해 그들을 빼고 창 resize 이벤트가 트리거되는 ul마다의 높이를 설정하는 것입니다. 이것은 단순한 문제 여야 만하는 것처럼 지나치게 복잡한 해결책처럼 보입니다. 더 좋은 방법이 있습니까?

그건 그렇고, 이것은 내가 페이지의 바닥에 스틱을 붙이기 위해 적용한 스타일링입니다. 머리글과 바닥 글의 높이를 알고 알고 절대적으로 목록을 배치 할 수있는 경우

footer { 
    // stick the footer to the bottom of the page 
    position: fixed; 
    bottom: 0px; 
    left: 0; 
    right: 0; 
} 

Answer 1

, 그것은 간단 충분 :

ul.list { 
    overflow: auto; 
    position: absolute; 
    top: [height of header]px; 
    bottom: [height of footer]px; 
} 

이 목록은 고정 된 폭을 가지고 있고, 그것을 유지하려면 을 중심으로, 당신이 할 수 있습니다

ul.list { 
    overflow: auto; 
    position: absolute; 
    top: [height of header]px; 
    bottom: [height of footer]px; 

    left: 50%;  
    width: 600px; /* as an example */ 
    margin-left: -300px; /* negative half of the width */ 
}