Google chrome Chrome中的CSS滚动条问题-滚动条和空间分配是分开触发的吗？

我有一个简单的HTML和CSS标记。有一个100%宽度和33.3333%高度的固定div，位于页面底部下方，顶部向外窥视。（底部：-28.21%；）-我在这段代码的另一个版本中使用Javascript来完全显示它。（底部：0；）

它看起来很好，除了：当主内容div的底部接近/与窗口底部相交时。此时，100%宽度固定div非常奇怪地收缩到约95%。一个小空间也出现在它下面

它只发生在铬合金中。有人经历过吗？有CSS补丁吗？或者它是浏览器中的一个bug？（在我看来是这样的…）

这是一张图片

代码如下：

CSS:

HTML:

注意：在正文中添加（overflow-y:hidden）可以解决问题，但当内容超过窗口高度时，我需要这些滚动条！！

html,body {
    margin: 0;
    padding: 0;
}

.squareDiv {
    float: left;
    width: 15%;
    margin-right: 1%;
    margin-bottom: 1%;
}

.squareDiv img {
    width: 100%;
}

.bottomBar {
    background-color: red;
    bottom: -28.21%;
    height: 33.333333333%;
    position: fixed;
    width: 100%;
}

<div class="midMid">
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
    <div class="squareDiv"><img src="Watermelons.jpg" class="mainImg" /></div>
</div>

<div class="bottomBar">
    <div class="bottomBarTop"></div>
    <div class="bottomBarMain"></div>
</div>