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检查的部分。这种在不理解他们做什么的情况下包含随机代码片段的方法不会长期工作。

基于Bootstrap的页面底部有很多空的空白区域。页脚未正确显示

1 个答案: