jQuery函数无法使用引导程序页脚正确加载

Question

我正在尝试基于JSON输出生成引导表。 现在，我需要在这些表之后加载引导程序页脚。 但有些表格未显示页脚。

这是我的代码

<script>
var data = [{
    "UserID": 1,
    "UserName": "rooter",
    "Password": "12345",
    "Country": "UK",
    "Email": "sac@gmail.com",
    "sac": "sac@gmail.com"

  },
  {
    "UserID": 2,
    "UserName": "binu",
    "Password": "123",
    "Country": "uk",
    "Email": "Binu@gmail.com"
  },
  {
    "UserID": 3,
    "UserName": "cal",
    "Password": "123",
    "Country": "uk",
    "Email": "cal@gmail.com"
  }
];





    $(document).ready(function() {
  var html = '<table class="table table-striped">';
  html += '<tr>';
  var flag = 0;
  $.each(data[0], function(index, value) {
    html += '<th>' + index + '</th>';
  });
  html += '</tr>';
  $.each(data, function(index, value) {
    html += '<tr>';
    $.each(value, function(index2, value2) {
      html += '<td>' + value2 + '</td>';
    });
    html += '<tr>';
  });
  html += '</table>';

  //$('.table.table-striped').after(html);
  // $('body').append(html);
  $(html).insertAfter('.para');
});




    $(document).ready(function() {
  var html = '<table class="table table-striped">';
  html += '<tr>';
  var flag = 0;
  $.each(data[0], function(index, value) {
    html += '<th>' + index + '</th>';
  });
  html += '</tr>';
  $.each(data, function(index, value) {
    html += '<tr>';
    $.each(value, function(index2, value2) {
      html += '<td>' + value2 + '</td>';
    });
    html += '<tr>';
  });
  html += '</table>';

  //$('.table.table-striped').after(html);
  // $('body').append(html);
  $(html).insertAfter('.para');
});


    $(document).ready(function() {
  var html = '<table class="table table-striped">';
  html += '<tr>';
  var flag = 0;
  $.each(data[0], function(index, value) {
    html += '<th>' + index + '</th>';
  });
  html += '</tr>';
  $.each(data, function(index, value) {
    html += '<tr>';
    $.each(value, function(index2, value2) {
      html += '<td>' + value2 + '</td>';
    });
    html += '<tr>';
  });
  html += '</table>';

 // $('.table.table-striped').after(html);
 $(html).insertAfter('.para');

});


</script>

页脚

<footer>
<div class="container-fluid" style="background-color:#222;bottom:0; position:fixed;">
 <div class="row">
    <div class="col-sm-3">
       <br>
       <br>
       <center><img class="icon" src="images/logo.png"  alt="logo"></center>
    </div>
    <div class="col-sm-4" style="color:#e0e0e0;">
       <h3 style="margin-top:10%;color:#42a5f5">ABOUT US.</h3>
       <p>
          Lorem Ipsum is simply dummy text of the Lorem Ipsum has been the industry's<br>
          when an unknown printer took a galley of type and The following<br>
          example shows how to<br><br>
          get a three various-width columns <br>
          make a type specimen book. It has survived not only <br>
          but also the leap into electronic typesetting,<br>
       </p>
    </div>
    <div class="col-sm-2">
       <h3 style="margin-top:7%;color:#42a5f5"><br>NAVIGATION</h3>
       <label style="color:#e0e0e0">
          HOME &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
          <hr>
       </label>
       <label style="color:#e0e0e0">
          SITE &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <hr>
       </label>
       <label style="color:#e0e0e0">
          ABOUT US &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <hr>
       </label>
       <label style="color:#e0e0e0">CONTACT US &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
    </div>
    <div class="col-sm-3">
       <h3 style="margin-top:4%;color:#42a5f5"><br>OUR LOCATION</h3>
       <iframe frameborder="0" scrolling="no" width="250" height="200" src="https://maps.google.com/maps?hl=en&q=national school of business management,sri lanka&ie=UTF8&t=hybrid&z=15&iwloc=B&output=embed">
          <div><small><a href="http://embedgooglemaps.com">
             embedgooglemaps.com
             embed google map
             embed google maps
             google maps karte erstellen
             </a></small>
          </div>
          <div><small><a href="https://ultimatewebtraffic.com/">buy websit traffic Ultimatewebtraffic</a></small></div>
       </iframe>
    </div>
 </div>
 <hr>
 <div class="row">
    <div class="col-sm-10">
       <p style="color:#29b6f6">Copyright &copy;  University 2016</p>
    </div>
    <div class="col-sm-2">
       <i class="fa fa-facebook-square fa-1x" style="color:#42a5f5"></i>&nbsp;
       <i class="fa fa-linkedin-square fa-1x" style="color:#42a5f5"></i>&nbsp;
       <i class="fa fa-twitter-square fa-1x" style="color:#42a5f5"></i> &nbsp;
       <i class="fa fa-google-plus fa-1x" style="color:#42a5f5"></i> &nbsp;
       <i class="fa fa-delicious fa-1x" style="color:#42a5f5"></i>&nbsp;
    </div>
 </div>
</div>
</footer>

这是我的输出结果

Answer 1

您需要为您的body元素添加相当于页脚高度的填充。

这个CSS可以做到，但是您也可以使用内嵌样式

body {padding-bottom: 250px}