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