データベースからのコンテンツの下にボタンを配置する方法

Question

私はこのコンテンツをデータベースから生成したので、オンライン版では期待していたほどのコンテンツが生成されるので、アプリケーションをより速く動作させるためにまた、さらに多くのデータがロードされたためにブラウザがクラッシュするのを防ぐために、結果を8に制限してから、さらにボタンを追加しますが、このボタンを追加して生成されたコンテンツの下に残りますこれは自動で上に移動する必要がありますこれはボタンの現在の状態です今私はフッタのような私のページの下に置くつもりですが、私はbottom:0を使用する場合は粘着的な原因ではないがコンテンツが8未満のコンテンツデータベースからは、ボタンはメインコンテンツから離れています。 Instagramのようなものがさらに多くのボタンをロードすると、ボタンはページの下部にとどまります。これは、あなたがそれを上（または下）に達したときに固執するposition: stickyを使用することができ、現代のブラウザのために私のボタンのコード

<button class="btn" id="zuan" style="background: #3897f0!important; position: absolute;text-align: center;margin-left:-45%;outline:none!important; margin-bottom:25px; border: 0px!important;  color: #fff!important;  padding: 12px 24px!important;border-radius:0px;">LOAD MORE</button> 

Answer 1

です。

スティッキーポジショニングは相対配置と固定配置のハイブリッドです。要素は指定されたしきい値を超えるまで相対的な位置として扱われ、固定された位置として扱われます。

続きを読む。 （source）をサポート

.sticky-button { 
 
    position: sticky; 
 
    position: -webkit-sticky; 
 
    position: -moz-sticky; 
 
    position: -ms-sticky; 
 
    position: -o-sticky; 
 
    bottom: 10px; 
 
}

<div style='width: 500px; height: 3000px; background: #ffffcc; padding: 20px'> 
 
    <div style='width: 500px; height: 2000px; background: #eeffff; padding: 20px'> 
 
    Page content 
 
    </div> 
 
    <button class='sticky-button'>Load more...</button> 
 
</div>

ブラウザ：

残念ながら、この1のための明確な仕様はありません - 機能がちょうどWebkitのに上陸し、そこにされますいくつかの既知の問題です。しかしボタンのためにそれはうまく動作します

Answer 2

私は最終的にこれを解決する方法を見つけました。これにより、たとえページの内容が不足していても、ページの下にフッターが配置されます。

<button class="btn" id="zuan">LOAD MORE</button> 
<br/> 
<style> 


html { 
height: 100%; 
box-sizing: border-box; 
} 

*, 
*:before, 
*:after { 
box-sizing: inherit; 
} 
body { 
position: relative; 
padding-bottom: 6rem; 
min-height: 100%; 
} 


#zuan{ 
position: absolute; 
background-color: #3897f0; 
outline:none!important; 
border: 0px!important;  
color: #fff!important; 
border-radius:0px; 
padding: 12px 24px!important; 
margin-left:-45%; 
bottom: -100; 
padding: 1rem; 
text-align: center; 
margin-bottom:30px; 
} 
</style>