ユーザーがすべての行をスクロールすると、テーブルの後ろにボタンが表示される

Question

大きなテーブルをユーザーに表示したい。次のステップに進む前にすべてのデータを確実に表示するには、「次へ」ボタンを非表示にして、ユーザーがすべての行をスクロールした後にのみ表示されるようにします。

ボタンがポップアップしているのではなく、テーブルの裏に隠れているように見えます。

これまでのところ、私はこのような固定位置とzインデックスを試しています：表がより大きければNow]ボタンにアクセスできない

.nextButton { 
    position: fixed; 
    bottom: 0px; 
    right: 0px; 
    z-index: -1; 
} 

.table { 
    background-color: white; 
    width: 100%; 
} 

：

<div id="container> 
<table id="table" class="table"> 
<!-- a lot of rows, asynchronously bound with images in some cells --> 
</table> 
<button id="button" class="nextButton"> 
    next 
</button> 
</div> 

とCSSを使用しましたページのコンテンツの高さはボタンの高さを考慮しないため、だから私は、このような

$(window).load(function() { 
    var height = $("#button").height(); 
    $("#container").height("+=" + height); 
}); 

JSFiddleなどのコードで人為的に高さを増加しよう（ボタンを非表示にするテーブルのために十分に小さくなるように、あなたが「結果」ペインのサイズを変更しなければならないことに注意してください）が、私はに実行しました問題。

最初の問題は、これを宣言的に行う方がはるかに好きなことです。第二に、ボタンをクリックすることはできませんが、ブラウザは表示されているにもかかわらず、私はdivをクリックしていると信じているようです。最後に、これは角度のあるプロジェクトにあり、window.readyは常に適切に起動するとは思われません。

私は間違っていますか？

Answer 1

固定サイズのボタンでは、ドキュメントが大きくならない場合がありますが、テーブルのmarginを使用してください。

より大きいか、ボタンの高さに等しい値を使用してテーブルmargin-bottom与える：あなたは物事を複雑にしているのはなぜここ

.table { 
    background-color: white; 
    width: 100%; 
    margin-bottom:50px; 
} 

はfiddle