내용이 확장되면 아래로 움직이는 끈적한 바닥 글

Question

페이지 하단에 붙이는 바닥 글로 SAVE 버튼을 포함하려고 시도하지만 'fold below'내용이있을 때마다 아래로 내려갑니다. 그러나 일반적으로 한 페이지에 들어있는이 콘텐트는 선택 확인란 요소를 사용할 때를 뛰어 넘습니다. 문제의

예 :

나는 선택 체크 박스 요소를 클릭하면 :

현재 코드

스타일 :

을 16,

.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에 마진이 바닥을 추가하는 것이 좋습니다.

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

당신은 화면 하단에 잘 접착 바닥 글 버튼을 유지하고 당신은 여전히 ​​당신의 마지막 요소로 스크롤 할 수 있습니다.