如何使固定位置div与居中的div对齐？

Question

不知道如何标题.我有一个像这样的html结构:

<div id="nav"></div>
<div id="wrapper">
   <div id="content">
   </div>
</div>?

有一些像这样的CSS:

#nav {
    width: 200px;
    height: 50px;
    margin: 0 0 0 -100px;
    position: fixed;     
    left: 50%;
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}

#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

包装器比内容宽,内容在包装器中居中.我的问题是当窗口小于包装div时,保持nav div(固定在页面顶部)与内容div居中/对齐.当您向左和向右滚动时出现问题,固定div在窗口中居中并且内容div左右滚动.我试图在没有javascript的情况下完成此任务.

这是我正在遇到的问题,调整结果窗口大小以查看当窗口小于包装div时,nav div不会保持居中div /与内容div对齐.

http://jsfiddle.net/p2Mzx/1/

提前致谢!

Answer 1

最简单的解决方案是放入#nav你的#wrapper并给它一个25px的水平边距:

HTML:

<div id="wrapper">
   <div id="nav"></div>
   <div id="content">
   </div>
</div>

CSS:

#nav {
    width: 200px;
    height: 50px;
    margin: 0 25px;
    position: fixed;  
    top: 0;   
    background: red;
}

#wrapper {
    width: 250px;
    height: 1000px;
    margin: 0 auto;
    background: blue;
}
#content {
    width: 200px;
    height: 1000px;
    margin: 0 auto;
    background: green;
}

也看小提琴.