有沒有一種更簡單的方法來保持元素從頁面頂部滾動？

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; 
}