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

你需要给你的身体元素的填充等同于您的页脚的高度。

这个CSS将做到这一点，但你可以这样做，也是在网上使用造型

body {padding-bottom: 250px}