当内容扩展时向下移动的粘性页脚

Question

我正在尝试将一个SAVE按钮作为页脚添加到页面的底部，但只要折叠位于页面底部，就会向下移动。内容。我通常将这个内容放在一个页面上，但是在使用select复选框元素时会超出此范围。

问题示例：

单击选中复选框元素时：

当前代码

式：

.bottom {
        position:absolute;
        bottom:0px;
        height:40px;
        width:100%;
        background:#E8E8E8;  
        text-align:center;
        font-weight:bold;
    }

HTML：

<div class="bottom" id="save"><div style="position: relative;top: 50%;transform: translateY(-50%);">SAVE</div></div>

Answer 1

我建议你按照按钮的大小在屏幕的上一个div中添加一个margin-bottom。

＆＃13;

＆＃13;

.somethingTop{
  width : 100%;
  height: 100%;
  background-color:#939393;
  margin-bottom:40px;
}

.bottom {
    position:fixed;
    bottom:0;
    height:40px;
    width:100%;
    background:#E8E8E8;  
    text-align:center;
    font-weight:bold;
}

＆＃13;

<div class="somethingTop" style="color:white;font-size:54px">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." -- End of the lorem ipsum</div>
<div class="bottom" id="save">
  <div style="position: relative;top: 50%;transform: translateY(-50%);">SAVE</div>
</div>

＆＃13;

＆＃13;

＆＃13;

您将页脚按钮固定在屏幕底部，您仍然可以滚动到最后一个元素。