使用固定的側邊欄時的HTML5砌體邊距/裝訂線問題（EDGE和Firefox）

Question

我正在嘗試使用使用固定的側邊欄菜單布局的設計來設置砌體牆 ，它在某種程度上可以工作，但是它添加了一個底部裝訂線，在調整視點大小后可以解決此問題。 僅在使用Firefox和Edge時才會出現此問題，Chrome似乎可以正常工作。

這個實際的錯誤似乎似乎是在堆棧溢出時進行的。 通過確保在頁面加載后砌磚能夠正確計算位置，即可解決堆棧溢出中列出的大多數問題。 但是可悲的是，我認為這可能與我的側邊欄菜單有關。

JSFiddle

使用jQuery(window).load(function(){似乎無法解決問題。在右側容器中添加固定位置確實可以解決問題，但會中斷滾動，如果可以避免，則最好不要使用此方法。

我花了一些時間將此項目添加到JSFiddle中，以幫助診斷此問題。

• 開發站點
• JsFiddle

問題截圖

的HTML

無關的完整代碼可以在JsFiddle或我的開發網站上進行查看。

<div class="amino-wrapper">
    <div class="amino-wrapper-left"><!-- SIDE BAR --></div>
    <main class="amino-wrapper-right">
        <div class="grid">
            <div class="grid-sizer"></div>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
            <a href="#" class="grid-item"><img src="#"></a>
        </div>
    </main>
</div>

的CSS

無關的完整代碼可以在JsFiddle或我的開發網站上進行查看。

img {
  max-width: 100%;
  height: auto;
}

.amino-wrapper {
    height: 100%;
    width: 100%;
}

.amino-wrapper-left {
    background-color: #1c1c1c;
    border-right: 1px solid #eee;
    color: #eee;
    height: 100%;
    left: 0;
    padding: 4rem 2rem;
    position: fixed;
    top: 0;
    width: 300px;
}

.amino-wrapper-right {
    margin-left: 300px;
    overflow-x: hidden;
    position: relative;
    top: 0;
    width: calc(100% - 300px);
}
.amino-wrapper-left header {
    left: 0;
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    width: 300px;
    text-align: center;
}
.grid-sizer, .grid-item  {
  width: calc(100% / 3);
  width: 33.33%
}

.grid {
  overflow: hidden;
}

的JavaScript

jQuery(window).load(function() {
    jQuery('.grid').masonry({
        // set itemSelector so .grid-sizer is not used in layout
        itemSelector: '.grid-item',
        // use element for option
        columnWidth: '.grid-sizer',
        gutter: 0,
        percentPosition: true
    })
});

Answer 1

以下CSS為我解決了這個實際問題：

• body { overflow-y: scroll; }