2

I am trying to include a SAVE button as a footer which sticks to the bottom of the page, but moves down whenever there is 'below the fold' content. This content I have generally fits on one page, however goes beyond when using a select check box element.

Example of the issue:

enter image description here

When I click the select check box element:

enter image description here

Current code

style:

.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>
beano
  • 932
  • 1
  • 15
  • 28

1 Answers1

1

I suggest you to add a margin-bottom to the previous div of your screen, at the size of your button.

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

You keep your footer-button sticked to the bottom of the screen and you can still scroll to your last element.

Florient
  • 236
  • 1
  • 9