使用固定边栏（EDGE和Firefox）时HTML5砌体边距/装订线问题

Question

我正在尝试使用固定侧边栏菜单布局设计Masonry Wall，它在某种程度上有效，但它添加了一个底部装订线，在调整视点大小后会解决。这个问题似乎只在使用Firefox和Edge时出现，Chrome似乎工作正常。

这个实际错误当然似乎正在做Stack Overflow上的轮次。 Stack Overflow上列出的大多数问题都是通过确保在页面加载后触发砌体来正确计算位置来解决的。但遗憾的是，情况就是如此，我认为这可能与我的侧边栏菜单有关。

的jsfiddle

使用jQuery(window).load(function(){似乎无法解决问题。添加固定在右侧容器上的位置确实可以解决问题但会中断滚动并且如果可以避免则不想使用此方法。

我花时间将这个项目添加到JSFiddle来帮助诊断这个问题。

• Dev Site
• JsFiddle

问题的屏幕截图

HTML 的

可以在JsFiddle或我的Dev Site上审核不相关的完整代码。

<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或我的Dev Site上审核不相关的完整代码。

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