我有一个简单的 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>