Question

我正在使用Bootstrap在Ruby on Rails中开发大型应用程序。页脚下方有一个奇怪的空白，我似乎无法删除。通过使用检查元素，我发现它不是正文或html的一部分。仅当我在该页面上使用的JavaScript / DOM操作文件被注释掉时才可见。那让我相信这是一个问题。

我发现的CSS技巧还没有奏效。包括这些例子...

body{   
   padding-bottom:60; (i.e. making it the same as my footer height)   
  }

或

footer {
  overflow: hidden;
}

这是我现在所拥有的东西：

body {
  padding-bottom:60px;
  margin-bottom: 0;
  position: relative;
  }

.footer {
  position: absolute;
  bottom: 0;
  height: 60px;
  background: #f8f8f8;
  border-top: 1px solid transparent;
  border-top-color: #e7e7e7;
  margin: auto;
  overflow: hidden;

 }

html {

 }

#page-wrapper {
  margin: 0 auto;
  padding-top: 15px;
  max-width: 1200px;
  width: 100%;
  padding-bottom: 60px;
} 

footer {
  width: 100%;
}

这是它在我的html中的位置：

</div><!-- /.container-fluid -->
<div id="page-wrapper" class="page-wrapper" >


    <div id="flash-style2">
    <%= bootstrap_flash %>
    </div>
    <%= yield %>

    </div> <!-- /page-wrapper -->

<%= render "footer" %> //from the footer form helper
<% end %>

页脚表单帮助程序如下：

<footer class="footer">
    <p>&copy; 2017 StormSensor &middot; <a href="" data-target="#privacy" 
    data-toggle="modal" id="privacy-link">Privacy</a> 
</footer>

因此，基本上，页脚不在任何引导类中。

我正在使用的JavaScript只是一个单独文件中的D3图形，该文件使用D3.select将数据放入html的div中。即

var svg = d3.select("#depth_plot").append("svg")

和html

 <div class="table-responsive">
    <div id="depth_plot" class="plot"></div>
 </div>

同样，当我注释掉保存d3的整个外部JS文件时，没有奇怪的空格。

谢谢！让我知道是否可以提供更多信息！一段时间以来，这个错误已经成为一个巨大的问题。

页脚下方的空白（仅适用于JavaScript？）

0 个答案: