2013-04-02 3 views
0

페이지의 왼쪽에 100 % 높이로 고정 된 div가 있습니다. 왼쪽 div의 높이를 초과하는 내용을 내부에 배치했습니다. 이제 오버플로 : auto를 추가하여 사용자가 해당 div의 콘텐츠를 스크롤 할 수 있도록 허용 할 수 있지만 고정 div의 콘텐츠를 페이지와 함께 스크롤하고 싶습니다. 이게 CSS로 가능합니까?고정 된 내용의 스크롤 만들기

감사

JSFIDDLE : http://jsfiddle.net/yZmu6/

HTML :

<div id="newsfeed-left"> 
    <div class="green-square"></div> 
    <div class="blue-square"></div> 
    <div class="green-square"></div> 
    <div class="blue-square"></div> 
    <div class="green-square"></div> 
    <div class="blue-square"></div> 
    <div class="green-square"></div> 
    <div class="blue-square"></div> 
    <div class="green-square"></div> 
</div> 

CSS :

body { 
margin: 0px 0px 0px 0px; 
padding: 0px 0px 0px 0px; 
} 

#newsfeed-left { 
position: fixed; 
float: left; 
height: 100%; 
width: 200px; 
padding: 0px 10px 0px 10px; 
border-right: 1px solid rgb(228, 228, 228); 
} 

.green-square { 
margin: 10px 0px 0px 0px; 
height: 200px; 
width: 200px; 
background-color: green; 
} 

.blue-square { 
margin: 10px 0px 0px 0px; 
height: 200px; 
width: 200px; 
background-color: blue; 
} 
+0

아니요 CSS로는 불가능합니다. 이 jQuery 플러그인 http://someweblog.com/hcsticky-jquery-floating-sticky-plugin/을 살펴 보길 권한다. –

답변

1

고정 div의 스크롤이 페이지의 나머지 별개입니다. JS로 끝낼 수 있습니다.

0

이 질문에 답하지 않거나 찾고있는 답변이 아닐지 모르지만 고정 대신 고정 위치를 사용하도록 CSS를 변경하면 페이지가 올바르게 스크롤됩니다.

#newsfeed-left { 
    position: absolute; 
    ... 
} 
관련 문제