如何在数据库内容下放置按钮答案

【问题标题】：How to place button under content from database如何在数据库内容下放置按钮
【发布时间】：2017-09-14 08:17:37
【问题描述】：

我有一个 css 问题，我从数据库生成了这个内容，所以我希望在在线版本上，会生成这么多的内容，所以为了让应用程序更快更好地工作，同时也防止浏览器由于加载了太多数据而崩溃，我将结果限制为 8，然后我放了一个添加更多按钮，但我希望这个添加更多按钮留在生成的内容下，即使我使用 ajax 删除产品它也应该自动向上移动这是按钮的当前状态，现在我如何将它像页脚一样放置在我的页面下方但不粘因为如果我使用bottom:0 它放置但如果内容少于 8 个从数据库生成的内容，则按钮远离主要内容。更像是 instagram 加载更多按钮，该按钮位于页面底部。这是我的按钮代码

  <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>

【问题讨论】：

标签： jquery html css ajax instagram

【解决方案1】：

我终于找到了解决方法，这就是解决方案。即使页面内容很短，这也会将页脚放在页面下方。

<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>

【讨论】：

所以你的按钮需要放在内容之后，但在向上滚动时不要保持粘性？

【解决方案2】：

对于现代浏览器，您可以使用position: sticky 在到达顶部（或底部）时粘贴。

粘性定位是相对定位和固定定位的混合体。元素被视为相对定位，直到它超过指定的阈值，此时它被视为固定定位。

在this MDN article阅读更多内容。

.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>

浏览器支持 (source)：

不幸的是，这个功能没有明确的规范 - 该功能刚刚登陆 Webkit，并且存在一些已知问题。但是对于按钮来说效果很好

【讨论】：