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

我试图将一个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>

来源

2017-11-25 Johnny

我建议你到下边距添加到您的画面的前一格，在您的按钮的大小。

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

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

你让你的页脚按钮贴到屏幕的底部，你仍然可以滚动到你的最后一个元素。

来源

2017-11-25 11:04:43 Florient

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

回答

相关问题