가변 너비의 헤더가있는 페이지 높이의 스크롤링 UL

Question

페이지 높이가 ul입니다. 그 ul 안에서 스크롤 할 수 있기를 바랍니다. 그것은 여기에서 볼 수 있습니다 : http://d.saew.it/pRyz

보시다시피, 페이지의 높이로 스크롤 할 수 있습니다. 이제는 헤더에서 볼 수 있듯이 헤더가 있어야합니다. 상단에 "고정"해야하지만 ul 목록의 너비는 가변적입니다. 따라서 너비가 가변 인 부모에서 가운데에 맞출 수 없기 때문에 고정으로 설정할 수 없습니다.

지금, 나는이 div 헤더가 여전히 위의 공간을 차지하면서 ul의 height: 100%이, 부모 (윈도우와 동일)의 높이가 될 수 있다는 사실을 제외하고는 거의 완벽하게 작품을 가지고있는. 따라서 부모 요소 끝에서 몇 픽셀 떨어진 ul이 발생합니다. 그것을 확인하십시오 : http://d.saew.it/NXL1

내가 순수 CSS에서 노력하고있는 것을 달성하는 방법이 있습니까?

편집 :

코드는 스타일러스에 있지만 사람이 아직도 그것을 읽을 수 있어야 : 이러한 요소

div.ul-header 
    background-color #E6E6E6 
    text-align center 
    margin 0 
ul 
    background-color #E6E6E6 
    height 100% 
    margin 0 
    overflow-x hidden 

모든 부모는 윈도우의에 도달 할 수 있도록 그들에 height: 100%;이 신장.

Answer 1

나는 당신이 원하는 것을 완전히 명확하지는 않지만, this은 내 생각에 가장 좋습니다.

기본적으로 절대 위치 지정 및 오버플로 규칙을 사용하여 스크롤 내용과 위치를 제어합니다.

컨테이너는 머리글과 스크롤 가능한 목록을 모두 보유하며 페이지 본문에는 height: 100%입니다. 또한 자식 요소를 절대적으로 배치 할 수 있도록 position: relative이 있습니다.

하위 요소 - 머리글과 목록 - 모두 position: absolute을가집니다. 이것은리스트가 부모의 높이에 따라 제한된 (즉 내용이 오버플로 됨) 높이와 변수 (부모의 높이에 따라)를 갖도록 강제 할 수 있도록합니다. 즉, 부모의 높이에서 항상 높이를 빼야합니다. 헤더. top 속성의 값은 전체 헤더의 높이 (패딩 및 경계 포함)에 해당해야합니다.

그런 다음 스크롤 목록을 얻으려면 목록에 overflow: auto을 사용할 수 있습니다.

헤더의 가운데 맞춤 텍스트를 가져 오는 것은 text-align: center과 같이 간단하며 컨테이너의 너비와 상관없이 작동합니다.