有没有更简单的方法来防止元素滚动到页面顶部？

Question

http://jsfiddle.net/XjqmS/

将内容标记更正为 position:relative< /code>，该元素不会停留在其位置。相反，它会滚动到图像上方。我希望页面滚动，而不是元素滚动。这可能吗？

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