Adding footer to page creates unwanted white margin

Search Best Practices - Search Front-End
1

Hi community,

I am attempting to add a footer to my answers result following the steps in the Adding a Header and Footer Unit.

I noticed that the footer has with a white “margin” below it. I’ve added a red background to the footer to visualize the issue:

image
image1330×961 37.8 KB

Is there a way to prevent this margin from displaying or “anchor” the footer element to the bottom of the page?

Thank you,
Max

2

Hey Max,

This happens when the page doesn’t have enough content to push the footer to the bottom of the page since the footer always appears when the content is done. To address this, we’ll want to make the footer stick to the bottom of the screen when there’s not enough content, while still only showing after the content is done when there is enough content (which is currently what happens).

You can add the following to the answers.scss file to use FlexBox to make the footer sticky:

.YxtPage-wrapper {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.YxtPage-content {
  flex: 1 0 auto;
}
3

Thanks @Kristy_Huang ! Worked perfectly :slight_smile: