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

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