1

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

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

它只发生在 Chrome 中。有没有人经历过这个？任何CSS修复？或者它是浏览器中的错误？（在我看来就是这样……）

这是一张图片http://s12.postimage.org/er7ld88d9/Capture.jpg。

这是代码：

小提琴

CSS：

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

HTML：

<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>
4

0 回答 0