In SharePoint Modern Page Layout using Application Customizer, custom footer gets disappeared

Question

In SharePoint Modern Page Layout using Application Customizer, the middle/main content height was too small for the view-port, so tried to increase the middle/main content height through CSS, by doing so custom footer is getting disappeared. Refer here for SharePoint Modern Page

Could anyone advice how to achieve it. Thanks in advance.

Answer 1

You could try to add ' position:fixed; 'to bottom css.

After you add this, you would need adjust other elements' CSS accordingly.

My test css:

position:fixed;
right:10px;
bottom:10px;

Updated:

Firstly, add display:none to bottom div css.

Secondly, add a script in code, determine the position of the scroll bar according to the scroll event of the div. When the scroll bar reaches the bottom, show bottom div.

Sample(you need to change the class):

$(function(){

          var nScrollHight = 0; 
          var nScrollTop = 0;   
          var nDivHight = $(".scrollRegion_dfa95bf5").height();
          $(".scrollRegion_dfa95bf5").scroll(function(){
            nScrollHight = $(this)[0].scrollHeight;
            nScrollTop = $(this)[0].scrollTop;
   　　　　　var paddingBottom = parseInt( $(this).css('padding-bottom') ),paddingTop = parseInt( $(this).css('padding-top') );
            if(nScrollTop + paddingBottom + paddingTop + nDivHight >= nScrollHight){

              $("div[class^='bottom']").show()
            }else{
              $("div[class^='bottom'").hide()
            }

            });
        })

Test result: