位置問題：固定和響應/自適應布局

Question

首先看一下這個網站： http : //irismediainfo2.lili.de/spip.php?article4924

在我的屏幕上，該屏幕截圖看起來像是： chrome-全窗口-桌面分辨率：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的位置是從中間位置計算的（按margin：auto），#toolbar的位置是從瀏覽器窗口的側面計算出來的（按position：fixed）。 因此，在任何其他windowsize中都不再使用它。

我試圖使#page浮動，使#toolbar出現在側面，但是這破壞了#page的“ margin：auto”，因此不再居中。

我也試過

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

因為我希望可以有一種方法來計算position:fixed從中心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即可將整個塊居中並在其后添加工具欄，因為#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%;
}