요소가 페이지 위쪽으로 스크롤되지 않도록하는 쉬운 방법이 있습니까?

Question

http://jsfiddle.net/XjqmS/

내 콘텐츠 태그를 position:relative으로 수정하면 해당 요소가 그대로 유지되지 않습니다. 대신 이미지 위에 스크롤됩니다. 페이지가 스크롤되는 것이지, 요소는 스크롤하지 않게하고 싶습니다. 그게 가능하니?

Answer 1

나는 position:fixed 사용하여 문제를 제거 할 레이아웃을 다시 실행 생각 : D

여기를 참조하십시오 : http://jsfiddle.net/SAfLK/

HTML

<div id="wrapper"> 
    <div id="header">FIXED HEADER</div> 
    <div id="navigation">FIXED NAVIGATION</div> 
    <div id="content"> 
     CONTENT GOES HERE 
     <img src="http://www.dummyimage.com/200/" /> 
     <br /> 
     <img src="http://www.dummyimage.com/200/" /> 
     <br /> 
     <img src="http://www.dummyimage.com/200/" /> 
     <br /> 
     <img src="http://www.dummyimage.com/200/" /> 
     <br /> 
    </div> 
</div> 

CSS

/*adjust dimensions as necessary*/ 

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

#wrapper { 
    position:relative; 
    height:100%; 
    width:400px; 
    background-color:#efe; 
    margin:0 auto; 
} 

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

#navigation, #content { 
    position:absolute; 
    top:50px; /*set to header's height*/ 
    bottom:0; 
    left:0; 
    right:0; 
} 

/* #content and #navigation's width should add up to the #wrapper's width*/ 

#navigation { 
    width:150px; 
    background-color:#cdc; 
} 

#content { 
    overflow:auto; 
    width:250px; 
    left:150px; /*set to whatever navigations's width is*/ 
    background-color:#fef; 
}