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

如果我正确理解您的问题，如果屏幕是＆lt; 1024px（headerBarContent）你希望标题位置是相对的..对吗？（比如Facebook）..

你可以通过media queries在没有JS的情况下实现这一点，即：

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

demo http://jsfiddle.net/BPcfB/

HTML＆amp; CSS：不能使div在更大的固定，100％宽度div内，在溢出时可滚动

1 个答案: