position:fixed 和响应式/自适应布局的问题

Question

先看看这个网站：http://irismediainfo2.lili.de/spip.php?article4924

在我的屏幕上，它看起来像这张截图：chrome - full window - desktop resolution: 1440x900 我认为对于你们大多数人来说，它看起来会有所不同，但这就是问题的一部分...

带有灰色边框的主要 div 在另一个 div 中，id="page"。

    #page {
        width: 560px;
        margin: 50px auto 0px auto;
        position:relative;
        }

我用 id="toolbar" 创建了一个新的 div，它看起来像固定在这个 #page-div 上，但它不随页面滚动。在我上面链接的网站上，您可以看到#toolbar 是一个虚拟框（带有一些文本的灰色）。

目前我在#toolbar 中使用position:fixed。

当我将它放在#page 的一侧时，它看起来像是附加在它上面，并且我调整了浏览器的大小 window...两个 div 不会移动同样的方法因为#page 的位置是从中间计算的（根据margin:auto）而#toolbar 的位置是从浏览器的侧面计算的window（根据position:fixed）。所以它不再以任何其他 window 尺寸附加。

我试图让#page 浮动，让#toolbar 出现在旁边，但这破坏了#page 的"margin:auto"，所以它不再居中。

我也试过了

#toolbar {
    position: fixed;
    center: 0px;  }

因为我希望有一种方法可以从中心计算position:fixed的位置。

没有任何效果，希望您知道解决方案。实际上我想要的一切都是这样的：

    #page {
        width: 560px;
        margin: 50px auto 0px auto;
        position:relative;  }

    #toolbar {
        position: fixed;
        center: 0px 280px 0px 0px;  }

我想用最少的代码和资源来做到这一点，因为我不想因为一个小工具栏而使加载速度变差。

如果您需要来自我的 css 或 html 的更具体的代码，请告诉我。希望目标清楚，问题清楚。

Answer 1

您所需要的只是一个包装器-div，它使整个块居中并在之后排列工具栏，因为您的 #page 在每个视口中都有固定的宽度。

HTML:

<div class="wrapper">
    <div id="toolbar">
        content
    </div>
</div>

CSS:

#toolbar {
    height: auto;
    padding: 10px 20px 10px 15px;
    background-color: rgba(170, 170, 170, 0.5);
    border: 1px solid #AAA;
    border-radius: 0px 5px 5px 0px;
    text-align: center;
    margin: 0px auto 0px 279px;
}
.wrapper {
    position: fixed;
    top: 30%;
    left: 50%;
}

position:fixed 和响应式/自适应布局的问题

Problems with position:fixed and responsive / adaptive Layout

html

javascript

css

jquery

less