html - 基于 Bootstrap 的页面底部有很多空白区域，页脚显示不正确

Question

这是有问题的页面:http://sdgsdgsdgsdg.atwebpages.com/

我基于官方静态导航栏示例:https://getbootstrap.com/examples/navbar-static-top/

以及官方的粘性页脚示例:http://getbootstrap.com/examples/sticky-footer/

我在页面上有一个 facebook 页面插件以及一个 Bootstrap 轮播。我删除了这两个的所有代码，看看问题是否会消失，但他们没有。

我的问题是页面底部有很多空白区域，几乎占满了页面的一半。

第二个问题是粘性页脚显示不正确。没有显示官方例子的银色和尺寸。

如有任何帮助，我们将不胜感激。

Answer 1

您已经包含了 https://getbootstrap.com/examples/navbar-static-top/navbar-static-top.css ，其中包括以下内容:

body {
  min-height: 2000px;
}

因此，您的页面有 2,000 像素高，在底部创建了大的白色空白区域。 (顺便说一句，就像在示例中一样。)

至于页脚，您链接到引用查看源的示例:http://getbootstrap.com/examples/sticky-footer/sticky-footer.css ，其中包括这个位:

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

由于您没有包含这些规则，它们不适用于您的网站。

您确实需要熟悉浏览器的检查器，尤其是围绕 CSS 检查的部分。这种在不了解它们的作用的情况下包含随机代码片段的方法不会长期奏效。