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

不知道如何标题的问题。我有一个HTML结构是这样的：如何保持固定的位置div与居中的div对齐？

<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时nav div不会保持居中/与内容div对齐。

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

提前感谢！

来源

2012-03-23 codybuell

您正在测试什么浏览器？在Chrome中，这对我很有用。 – 2012-03-23 02:29:24

目前的Safari，并没有在我的终端上使用Chrome。尝试缩小结果窗口，使其小于包装div。我需要导航以符合内容。 – codybuell 2012-03-23 02:34:27

最简单的解决办法是把#nav在#wrapper，并给它25像素的水平边距：

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 。

来源

2012-03-23 02:39:50 jeroen

如果缩小结果窗口然后滚动到右侧，则导航栏和内容div不会保持对齐状态。 – codybuell 2012-03-23 03:32:10

尝试使结果窗口的一半大小的包装div然后滚动到右侧。导航div和内容div不保持一致。关于如何让他们在一起的任何想法？这里有一个更大的jsfiddle来强调这个问题：http://jsfiddle.net/p2Mzx/24/ – codybuell 2012-03-23 12:37:02

@codybuell你是对的，我只是调整了窗口，它似乎工作。我不认为你可以使用CSS来解决这个问题，除非你使用媒体查询来生成响应式设计而不是固定的设计。 – jeroen 2012-03-23 13:54:13

我想你也可以为nav添加margin: 0 auto。

然后，nav将被定位到父元素，就像包装一样，居中。但删除了固定的表单导航。 position:fixed使它定位到浏览器窗口并排除流量。你想要吗？

来源

2012-03-23 03:32:12 Eleven

将nav放在包装中，恰好位于内容之上会更合适。

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

nav的CSS可以有25px的左右边距。绝对定位和宽度也是不需要的。

#nav { 
    height: 50px; 
    margin: 0px 25px 0px 25px; 
    background: red; 
} 

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

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

请参阅此琴：http://jsfiddle.net/p2Mzx/20/

来源

2012-03-23 03:34:09 angelorohit

导航div需要留在窗口的顶部。 – codybuell 2012-03-23 03:36:24

可以固定在导航和内容给予padding-top。

考虑此链接jsfiddle

来源

2012-03-23 04:17:38

尝试使结果窗口大小为包装div的一半，然后向左和向右滚动。导航div和内容div不保持一致。关于如何让他们在一起的任何想法？这里有一个更大的jsfiddle来强调这个问题：http://jsfiddle.net/p2Mzx/23/ – codybuell 2012-03-23 12:32:37

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

回答

相关问题