在 SharePoint 使用应用程序定制器的现代页面布局中，自定义页脚消失了

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: