Get rid of whitespace at bottom of Mat Dialog

Question

I am using Angular Material for my Angular app. Currently, I have a dialog that shows info about a post. However, there is a lot of annoying whitespace at the bottom of the dialog that I want to get rid of. How can I do this?

Here is an image:

HTML

<div id="postModal">
  <div mat-dialog-content id="postForm">
    <div class="bigImage">
      <img src={{imageLinks[0]}} class="postImage"/>
    </div>
  </div>

</div>

SCSS

  body{
    position: relative;
  }


.postImage{
  height: 80%;
  width: 100%;
}

.bigImage{
  text-align: center;
  display: block;
}

#postForm{
  height: 80vh;
  width: 100%;
  display: box;
}


mat-dialog-container{
  padding-right: 30px;
  padding-left: 30px;
  padding-top: 10px !important;
  padding-bottom: 0px !important;
}

Answer 1

You should remove the height from the #postForm. A height: 80vh makes it take up 80% of the height of the screen.

Since you are providing a fixed height to it, there will be empty space left if the image doesn't take up all the space.

Also your postImage has a height of 80%, the remaining space will be empty.