當內容擴展時向下移動的粘性頁腳

我試圖將一個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

當內容擴展時向下移動的粘性頁腳

回答

相關問題