HTML & CSS : Can't make div inside of larger fixed, 100% 宽度 div，溢出时可滚动

Question

我正在处理一段与此类似的 HTML:

<div id='headerBar'>
    <div id='headerBarContent'>
        <div id='leftContentSubdiv'></div>
        <div id='rightContentSubdiv'></div>
    </div>
</div>

像这样使用 CSS:

#headerBar
{
    position: fixed;
    left: 0px;
    right: 0px;

    min-width: 1024px;
    width: 100%;
    height: 34px;

    z-index: 10000;
}

#headerBarContent
{
    display: inline-block;

    position: absolute;
    left: 50%;
    margin-left: -512px;

    width: 1024px;
}

#leftContentSubdiv, #rightContentSubdiv
{
    position: relative;

    width: 512px;
    height: 34px;
}

我试图创建的是一个标题栏，它可以随页面垂直滚动，并且当窗口小于 headerBarContent 的宽度时水平滚动，而不使用 JavaScript。

• Facebook完全按照我指定的方式实现它，而不使用 JavaScript。

• Twitter用 JavaScript 实现它

• The Onion说明我现在被困在哪里。该页面无法一旦窗口大小小于标题居中的内容

我无法弄清楚 Facebook 在标记中究竟做了什么具有此功能。谁能帮忙？

Answer 1

如果我正确理解你的问题，如果屏幕 < 1024px (headerBarContent) 你希望标题位置是相对的..对吗？ (比如 Facebook)..

您可以通过 media queries 实现这一点而无需 JS即:

@media screen and (max-width: 1024px){
    #headerBar{
        position:relative;
    }
}

演示 http://jsfiddle.net/BPcfB/