We are creating a custom footer though SPFx Application Customizer for modern sharepoint pages. But our requirement on the Footer is to show the footer with a increased height. Once we deployed the customizer the Body of the page is not fully displayed. The footer is getting freeze in the screen and the rest of the body content needed to navigate via vertical scrolls. The code block to set the footer is mentioned below.

let bottomPlaceholder: PlaceholderContent = this.context.placeholderProvider.tryCreateContent(PlaceholderName.Bottom);

if (bottomPlaceholder) {
    bottomPlaceholder.domElement.innerHTML = footer;

return Promise.resolve();

Ideally the Footer should be placed in the bottom of the page not in the bottom of the screen. Is there a solution to apply this footer in bottom of the page so that it won't affect the contents of the page?

1 Answer 1


There are two page placeholders that you can use, these are defined in the documentation:

Use page placeholders from Application Customizer (Hello World part 2)

"Application Customizers provide access to well-known locations on SharePoint pages that you can modify based on your business and functional requirements. For example, you can create dynamic header and footer experiences that render across all the pages in SharePoint Online."

enter image description here

  • I think OP is already using SPFx application customizer for creating footer in site. OP need technical help with code to place/stick the footer at the bottom of page so that it will not float on screen while scrolling the page. Sep 26 at 3:04
  • Yes right, Any idea about it ? Oct 12 at 19:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.