Chrome中页脚（和身体）下方的空白处 [英] White space below footer (and body) in Chrome

问题描述

当我添加CSS时：

  body {
 overflow-x：hidden; 
} 
  

由于某些原因，我在页脚下方留下了大的空白，但仅限于Chrome。我在几个浏览器上测试过，一切正常。

这是一些浏览器错误还是其他问题？

您可以查看 http://fc-translations.ch

---

更新

我尝试了以下所有建议，这两种解决方案都无法解决我正在进一步研究，并意识到这个问题不是由'body'元素（或'min-width：960px;'在评论中提到的）上添加'overflow-x：hidden;'造成的。

省略发生是因为几乎每次当您尝试在Chrome的检查器（F12）中禁用body元素的某些内容时，空白区域消失。

<我仍然无法弄清楚是什么导致了这个问题。白色空间甚至不在body元素中，但正如我所见，它出现在Chrome的body下面。

解决方案

问题：

问题似乎来自动画 bounceInUp 应用于 .la-tekst a 。

动画执行以下操作：

  @  -  webkit-keyframes bounceInUp {
 0％{opacity：0; -webkit- transform：translateY（2000px）} 
 60％{opacity：1; -webkit-transform：translateY（-30px）} 
 80％{ -  webkit-transform：translateY（10px）} 
 100％{ -  webkit-transform：translateY（0）
} 
} 
  

也许这是 inline-block的副作用（ .la-tekst a 设置为 display：inline-block; ），但是anchor元素占据了它的原始空间，以及从 bounceInUp anim
$ b

解决方案：

应用 overflow：hidden 以下任何一项都可以工作

（选择一个选择器）

  .page {overflow：hidden;} 
 .section-content {overflow：hidden;} 
 .zone-content-wrapper {overflow：hidden;} 
 .region-content {overflow ：hidden;} 
 .region-content-inner {overflow：hidden;} 
 .block-block-1 {overflow：hidden;} 
 .la-tekst {overflow：hidden;} 
  

或

更改边界区域定位标记占据

  .la-tekst a {
 display：inline; 
} 
  

或

  .la-tekst a {
 display：block; 
} 
  

我提供的两个建议可以解决问题......第一个隐藏超出其高度的子元素或（包括超级动画锚标签）。

第二种解决方案将更改锚标签占用的边界区域，以便它不再占用它的动画空间和原始空间。

When I add in CSS:

body {
overflow-x: hidden;
}

I got big white space below footer for some reason, but just in Chrome. I was test on a few browsers and everything fine.

Is this some browser bug or the problem is something else?

You can take a look at http://fc-translations.ch

---

UPDATE

I tried all the given suggestions below but neither solution is working. I was researching further and realized that the problem is not caused by adding 'overflow-x: hidden;' on 'body' element (or 'min-width: 960px;' which is mentioned in comment).

Omission happened because almost every time when you try to disable something for 'body' element in Chrome's inspector (F12), white space disappears.

I still can't figure out what is causing this problem. The white space is not even in the 'body' element but, as I can see, it appears below the 'body' in Chrome.

Any idea?

解决方案

Problem:

The problem appears to be coming from the animation bounceInUp being applied to .la-tekst a.

The animation does the following:

@-webkit-keyframes bounceInUp {
        0%{opacity:0;-webkit-transform:translateY(2000px)}
        60%{opacity:1;-webkit-transform:translateY(-30px)}
        80%{-webkit-transform:translateY(10px)}
        100%{-webkit-transform:translateY(0)
    }
}

Perhaps it was a side effect of the inline-block (.la-tekst a is set to display:inline-block;), but the anchor element was occupying both its original space, and the space set from the 0% of the bounceInUp animation.

Solutions:

Applying overflow:hidden to any of the following will work

(pick one selector)

.page {overflow:hidden;}
.section-content {overflow:hidden;}
.zone-content-wrapper {overflow:hidden;}
.region-content {overflow:hidden;}
.region-content-inner {overflow:hidden;}
.block-block-1 {overflow:hidden;}
.la-tekst {overflow:hidden;}

or

Change the bounding area that the anchor tag occupies

.la-tekst a {
    display: inline;
}

or

.la-tekst a {
    display: block;
}

The two suggestions I provided will fix the problem... The first one will hide child elements bleeding past its height or (including the super-animated anchor tag).

The second solution will change the bounding area that the anchor tag occupies, so that it no longer occupies its animated space and its original space at the same time.

这篇关于Chrome中页脚（和身体）下方的空白处的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！