【问题标题】:extra space after footer inconsistent across pages页脚后的额外空间跨页不一致
【发布时间】:2017-12-30 02:47:12
【问题描述】:

我有一个网站正在运行,大约 2 天前我更新了代码,突然之间,我只在某些页面的页脚后有这么大的空间,其他页面似乎运行良好。我尝试了一切,但它与填充或引导框模型无关。无论如何,我正在使用 thymeleaf 和 jquery。我怀疑它与脚本有关。请看这里,https://tajili.co.zaenter image description here

【问题讨论】:

  • 很奇怪 - 浏览器工具在这个位置没有显示任何元素,并且它上面的任何元素都没有可能导致这种情况的边距或类似的东西,html 元素也在该区域上方完成......
  • 我已经使用 chrome 的分析器来查看是否可以找到一些东西...关于 google 地图似乎发生了一些特定的事情,但没有进一步调查,你会想检查一下出硬。另外,我看到你有一个反广告拦截器或其他东西......所以我禁用了我的广告拦截器来查看,结果仍然相同,但是我看到了一个指向页面顶部的箭头,当广告被屏蔽时它不存在。
  • @Xolani... 请在“container”和“col-*”之间使用“row”类。由于您没有使用它,这可能是问题之一。

标签: jquery html spring-boot twitter-bootstrap-3 thymeleaf


【解决方案1】:

form 内有一个带有“下拉菜单打开”类的元素,属性为action="/classifieds"。它的生成高度为 2671px,在它的 CSS 中它有visiblity: hidden,这仍然会导致它占据那个空间(而不显示它的内容)。

如果你可以删除它并用“display: none”替换它,问题就会解决。但实际上,由于它是 material-kit.min.css 中的规则,您可能无法更改它,因此您必须通过将以下规则添加到自定义 CSS 中来覆盖它:

.btn-group.bootstrap-select .dropdown-menu, .dropdown .dropdown-menu, .dropdown-menu.bootstrap-datetimepicker-widget, .dropup .dropdown-menu {
    visiblity: visible;
    display: none;
}

【讨论】: