javascript - 如何从中心(或其他有效的替代方法)扩展选择器宽度？

Question

我有一个导航栏 (#nav_bar)，它具有以下 CSS 属性:

#nav_bar {
    background: url(../images/navbar.png) repeat-x;
    width: 100%; height: 50px;
    margin-bottom: 20px;
}

它采用 #wrap 的宽度，即 1024px 宽并且具有 margin: auto;，但是我想将其扩展为它将适合所有屏幕尺寸 100%。我试图设置 width: 500%; 只是为了看看它会做什么，然后我意识到它从左扩展 -> 右，而不是从中心双向扩展。

所以，我要问的是；

Is it possible to have an element expand from the center, then perhaps I could set the max-width property or use javascript to find out the visitors screen resolution then assign the width from there; without major inefficiencies, i.e. extended load times/cross-browser compatibility issues?

Just for reference, a link to the particular page I'm talking about

任何答案将不胜感激;)!

Answer 1

只需将您的#nav_bar 移出#wrap。

或者你可以让你的 #nav_bar 有 position: absolute;左:0px； width: 100%; 在 CSS 中，这也可以。