javascript - 位置 :fixed and responsive/adaptive Layout 的问题

Question

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

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

带灰色边框的主 div 位于另一个 id="page"的 div 中。

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

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

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

当我将它放在#page 的一侧以便它看起来像是附加到它上时，我调整浏览器窗口的大小...这两个 div 不会以相同的方式移动，因为 #page 的位置是从计算的中间(by margin:auto)和#toolbar 的位置是从浏览器窗口的一侧计算的(by position:fixed)。因此，它不再适用于任何其他窗口大小。

我试图让#page float ，让#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

所有你需要的是一个 wrapper-div，它将整个 block 居中，然后是工具栏，因为你的 #page 在每个视口(viewport)中都有固定的宽度。

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%;
}