使用固定边栏（EDGE和Firefox）时HTML5砌体边距/装订线问题 [英] HTML5 Masonry Margin / Gutter Issue when using fixed Sidebar (EDGE & Firefox)

问题描述

我正在尝试使用固定侧边栏菜单设计或我的开发网站。

 < 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％; 
身高：汽车; 
} 
 
 .amino-wrapper {
身高：100％; 
宽度：100％; 
} 
 
 .amino-wrapper-left {
 background-color：＃1c1c1c; 
 border-right：1px solid #eee; 
颜色：#eee; 
身高：100％; 
左：0; 
填充：4rem 2rem; 
头寸：固定; 
 top：0; 
宽度：300px; 
} 
 
 .amino-wrapper-right {
 margin-left：300px; 
 overflow-x：hidden; 
头寸：相对; 
 top：0; 
宽度：计算（100％ -  300px）; 
} 
 .amino-wrapper-left header {
 left：0; 
头寸：固定; 
 top：50％; 
 transform：translateY（-50％）; 
宽度：300px; 
 text-align：center; 
} 
 .grid-sizer，.grid-item {
 width：calc（100％/ 3）; 
宽度：33.33％
} 
 
 .grid {
溢出：隐藏; 
} 
  

JavaScript

  jQuery（window）.load（function（）{
 jQuery（'。grid'）。masonry（{
 // set itemSelector所以.grid-sizer不用于布局
 itemSelector：'。grid-item'，
 //使用元素作为选项
 columnWidth：'。grid-sizer'，
 gutter：0，
 percentPosition：true 
}）
}）; 
  

解决方案

以下CSS解决了这个实际问题我：

• body {overflow-y：scroll; }

I'm attempting to setup a Masonry Wall with a design that uses a fixed sidebar menu layout, it works to some degree but it is adding a bottom gutter, which resolves after resizing the viewpoint. This issue only seems to occur when using Firefox and Edge, Chrome seems to work fine.

This practical error certainly seems to be doing is doing the rounds on Stack Overflow. Most of these issues listed on Stack Overflow are resolved by ensuring that the masonry is fired after the page load to correctly calculate the positions. However sadly this is the case and I think it may be related to my sidebar menu.

JSFiddle

Using jQuery(window).load(function(){ does not seem to resolve the issue. Adding the position fixed to the right side container does fix the issue but breaks the scroll and prefer not to use this method if it can be avoided.

I've take the time to add this project to a JSFiddle to help diagnoses this issue.

• Dev Site
• JsFiddle

Screenshot of Issue

HTML

Unrelated full code can be reviewed on the JsFiddle or my 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

Unrelated full code can be reviewed on the JsFiddle or my 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
    })
});

解决方案

The following CSS fixed this practical problem for me:

• body { overflow-y: scroll; }

这篇关于使用固定边栏（EDGE和Firefox）时HTML5砌体边距/装订线问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！