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

Question

我有一个css问题我有这个内容是从数据库生成的，所以我希望在网络版上会产生这么多内容，所以为了让应用程序更快更好地工作，还要防止浏览器由于加载了如此多的数据而导致崩溃我将结果限制为8，然后我添加了更多按钮，但我想要添加更多按钮以保留在生成的内容下，即使我删除了带有ajax的产品，它也应该自动向上移动这是按钮的当前状态，现在如何将其放在我的页面下像页脚一样但不是粘性因为如果我使用 <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> 它会放置但是如果内容小于8生成的内容从数据库，该按钮远离主要内容。更多像instagram加载更多按钮，按钮停留在页面的底部。这是我的按钮代码

@RestController
@RequestMapping("/example")
public class ExampleController {

    @Autowired
    private ExampleService exampleService;

    @GetMapping("/{id}")
    public ExampleResponse getExample(@NotNull @PathVariable("id") String id) {
        return exampleService.getExample(id);
    }
}

Answer 1

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

  

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

在this MDN article中阅读更多内容。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

支持浏览器（source）：

不幸的是，这个版本没有明确的规范 - 该功能刚刚登陆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>