Есть ли более простой способ предотвратить прокрутку элемента в верхней части страницы?

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