preface

The requirement is that the footer at the bottom of the page is adapted to the screen, that is, when the screen is beyond a screen, it needs to be behind the last element of the page, and when it is less than a screen, it needs to be positioned below. In fact, analyze this requirement as long as you judge the height and content of the page for positioningCopy the code

Idea about

1. Here's how I do it: First get the height of the bottom footer relative to the top 2. Use the overall height of the page and the height of the footer at the bottom relative to the top to judge. If the overall height is greater than the height of the footer relative to the top, it indicates that the page does not exceed the screen and needs to be positioned below the screen. If the overall height is less than the height of the footer relative to the top, it means that the content exceeds the screen. We also need to determine the distance between the elements adjacent to the bottom footer and the bottom 4. If it's bigger than one footer and it's close to the bottom but not out, then there's problem 5. So if the height of the adjacent element is greater than a footer from the bottom, the position is also added to the first conditionCopy the code

In the code

Get the height of the bottom footer relative to the top

js

 componentDidMount() {
     // Add a delay after dom generation
     setTimeout(() = > {
         let hei = document.querySelector('body').offsetHeight// The height of the entire window
         let footerTop = this.footer.offsetTop // The distance between the bottom footer and the top})}Copy the code

2. Use the overall height of the page and the height of the bottom footer relative to the top.

If the overall height is greater than the height of the footer relative to the top of the screen, it does not exceed the screen and needs to be positioned below the screenCopy the code

js

 componentDidMount() {
     // Add a delay after dom generation
     setTimeout(() = > {
         let hei = document.querySelector('body').offsetHeight// The height of the entire window
         let footerTop = this.footer.offsetTop // The distance between the bottom footer and the top
         if (hei > footerTop) {
             // There is no need to add positioning beyond one screen height
             this.footer.classList.add("footerPosi")}else {
              this.footer.classList.remove("footerPosi")}}}Copy the code

css

 .footerPosi{
     position: absolute;
     bottom: 0;
 }
Copy the code

3. You also need to determine the distance between the elements adjacent to the bottom footer and the bottom

 componentDidMount() {
     // Add a delay after dom generation
     setTimeout(() = > {
         let hei = document.querySelector('body').offsetHeight// The height of the entire window
         let footerTop = this.footer.offsetTop // The distance between the bottom footer and the top
         let footerHei = this.footer.offsetHeight
         let broNode = this.footer.previousSibling // Next to the footer
         let broNodeHei = hei - (broNode.offsetHeight + broNode.offsetTop)// The distance from the bottom is the sum of the total height minus the height of the neighboring elements at the bottom and the height relative to the top
         if (hei > footerTop && broNodeHei > footerHei) {
             // There is no need to add positioning beyond one screen height
             this.footer.classList.add("footerPosi")}else {
             this.footer.classList.remove("footerPosi")}}}Copy the code

The Bug

1 once the interface is requested, the page is completely messed up when there is interface data 😂😂😂(still naive to think that it is ok) 2. Need to in componentWillReceiveProps recalculate because when the interface after a request, the page will trigger the footer of props update 3. When switching between pages, the calculation results of the previous page may be retained in the next page, so it is necessary to make a clear positioning in advanceCopy the code

To solve the Bug

1. Then I packaged a method to put all the things that need to be updated in one at DidMount and WillReceiveProps

  resetFooter() {
     this.footer.classList.remove("footerPosi") //
     let hei = document.querySelector('body').offsetHeight// The height of the entire window
     let footerTop = this.footer.offsetTop // The distance between the bottom footer and the top
     let footerHei = this.footer.offsetHeight
     let broNode = this.footer.previousSibling // Next to the footer
     let broNodeHei = hei - (broNode.offsetHeight + broNode.offsetTop)// The distance from the bottom
     if (hei > footerTop && broNodeHei > footerHei) {
         // There is no scrollbar to position
         this.footer.classList.add("footerPosi")}else {
         this.footer.classList.remove("footerPosi")}}componentDidMount() {
     // after dom is generated
     setTimeout(() = > {
         this.resetFooter()
     })
  }
  componentWillReceiveProps() {
     setTimeout(() = > {
         this.resetFooter()
     })
  }
Copy the code

conclusion

1. It was not until I did it that I realized that there were many things to pay attention to, such as clear positioning in switching pages 2. And when a screen is exactly full but no more than 3. This time to make a summary of the hope not to repeat the bug next timeCopy the code

The last

If there are any questions please feel free to comment 💪💪💪