How can I dynamically resize a leaflet map after clicking a button?

I have a leaflet map contained in <div id="map" data-tap-disabled="false" style="width: 100%; height: 100%;"></div>

This page is divided into <ion-header>, <ion-content> and <ion-footer>. The map is contained into <ion-content>. What I would like to do is hide the header and footer with a button.

So I created a button with L.easyButton. The code is the following:

L.easyButton('click',function(){
    if(self.hideLayout){
      self.map.addControl(setLayers);
      self.map.addControl(setZoom);
      self.map.addControl(toolBar);
      self.map.addControl(setScale);
      self.enableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = false;
      self.hideFooter = false;
      self.map.invalidateSize(true);
    }else{
      self.map.removeControl(toolBar);
      self.map.removeControl(setLayers);
      self.map.removeControl(setZoom);
      self.map.removeControl(setScale);
      self.disableAdditionalButtons(textButton, arrowButton);
      self.hideLayout = true;
      self.hideFooter = true;
      self.map.invalidateSize(true);
    }

And I added the following code into the <ion-footer>:

<ion-footer *ngIf="!this.mapService.hideFooter">

What happens is that the map doesn't resize and remains a white band instead of the footer

I tried to use the invalidateSize leaflet method, even with the "setInterval" but without success. I think there is something about html and css to edit but I'm not an expert yet.

Again, really thanks to everyone in advance and I hope I was clear :)

Finally I found a solution that works for me. I'll post it here. I want to thank @Mostafa Harb for helping me.

L.easyButton('click', function() {
  const footerAndHeader = Array.from(document.getElementsByClassName('scroll-content') as HTMLCollectionOf<HTMLElement>)[1];

  if (self.hideLayout) {
    self.map.addControl(setLayers);
    self.map.addControl(setZoom);
    self.map.addControl(toolBar);
    self.map.addControl(setScale);
    self.enableAdditionalButtons(textButton, arrowButton);
    self.hideLayout = false;
    self.hideFooter = false;
    self.hideHeader = false;
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "40px";
    footerAndHeader.style.marginTop = "54px";
  } else {
    self.hideLayout = true;
    self.hideFooter = true;
    self.hideHeader = true;
    self.map.removeControl(toolBar);
    self.map.removeControl(setLayers);
    self.map.removeControl(setZoom);
    self.map.removeControl(setScale);
    self.disableAdditionalButtons(textButton, arrowButton);
    self.map.invalidateSize(true);

    footerAndHeader.style.marginBottom = "7px";
    footerAndHeader.style.marginTop = "3px";
  }
})

In my case the problem was the <div> with "scroll-content" class that were automatically created inside the <ion-content> tag. So, using getElementsByClassName, I took the second element in my array and I adjusted margin top and margin bottom for the header and for the footer.

Surely this solution will not be optimal and there will be a better way.