특정 영역 내의 페이지 콘텐츠를 스크롤 하시겠습니까?

Question

고정 폭 레이아웃의 바깥 쪽 가장자리에 고정 요소가있는 웹 사이트를 디자인하고 있습니다. 센터의 div는 콘텐츠 용으로 예약되어 있습니다.

사용자가 스크롤 할 때, 고정 된 외부 탐색 요소 이외의 모든 콘텐츠가 해당 중심 요소의 경계 내에 있도록하고 싶습니다. alt text http://i35.tinypic.com/15s3cax.png

내가 아주 쉽게 자동으로 중심 요소의 오버 플로우 속성을 설정하고 모든 내부에 남아있는 수 :

여기에 무슨 뜻인지의 빠른 모형입니다. 그러나 스크롤 막대가 해당 요소의 가장자리에 나타나지 않는 것이 매우 중요합니다.

기본적으로, 내가하는 중 궁금 해요 :?

• 가 그 지역 (아마도 내가 크기와 본문 요소의 위치를 변경할 수있는 콘텐츠를 제한하는 것은 - 허용 합니다 - 다음 본체 외부 고정 요소 위치
• 가 오버플 사용시 DIV 내부 나타나는 스크롤바 숨기기. 자동

012,

도움이 될 것입니다.

Answer 1

가능한 경우 고정 위치 요소를 4 개의 개별 섹션 (상단, 좌측, 우측 및 하단)으로 분리해야합니다. 그럼 그냥 있는지 확인하십시오 당신 패드를 사용하면 내용이 중복되지 않도록 각각의 너비와 높이로 중심 내용 영역 :

HTML

<!-- 4 fixed position elements that will overlap your content --> 
<div id="top"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="bottom"></div> 

<div id="content"> 
    <!-- Your content --> 
</div> 

CSS

html, body { 
    height: 100%; 
} 

#top, #left, #right, #bottom { 
    position: fixed; 
    left: 0; 
    top: 0; 
    z-index: 2; 
    background: red; 
} 

#top, #bottom { 
    width: 100%; 
    height: 20px; 
} 

#bottom { 
    top: auto; 
    bottom: 0; 
} 

#left, #right { 
    height: 100%; 
    width: 20px; 
} 

#right { 
    left: auto; 
    right: 0; 
} 

#content { 
    position: relative; 
    z-index: 1; 
    padding: 25px; /* prevent content from being overlapped */ 
} 

당신 그것을 볼 수있다 in action here.

콘텐츠 영역의 위치 : 상대적에도 유의하십시오. 이것은 z-index가 올바르게 작동하고 내용이 고정 섹션 아래에 표시되기 때문입니다. 당신이 IE6/7 지원에 대해 신경 경우

, 당신은 그 멋진 브라우저에서 제대로 작동 고정 된 위치를 얻을 수있는 CSS expression fix를 추가해야합니다.