html - 如何使固定位置的 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 时，保持固定在页面顶部的导航 div 与内容 div 居中/对齐。当您向左和向右滚动时会出现问题，固定的 div 保持在窗口的中心，而内容 div 向左和向右滚动。我试图在没有 javascript 的情况下完成此操作。

这是我遇到的一个 jsfiddle，调整结果窗口的大小以查看当窗口小于包装 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;
}

另见 fiddle .