Question

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

Chrome中的CSS滚动条问题 - 滚动条及其空间分配是否单独触发？

0 个答案: