Css force div to fill the space left between it and footer

Question

I have a contact form in a div that fills perfectly the distance between it and the footer in smaller screen resolutions but when the screen is bigger i have a problem: there is white space between the contact-form div and the footer:

this is my css(the important part which helps me keep the footer at the bottom):

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
}

body {
  font: 400 16px/1.4 'Roboto', sans-serif;
  display: flex;
  flex-direction: column;
}

.contact {
  width: 100%;
  clear: both;
  overflow: hidden;
  background: #fff;
  padding: 50px 0;
  margin-top: 50px;
}

.footer {
  background: #313a44;
  border-top: 1px solid #e2e8f0;
  width: 100%;
  flex-shrink: 0;
  padding: 50px 0 25px 0;
}

<div class="header">

</div>
<div class="slider">

</div>
<div class="contact">

</div>
<div class="footer">

</div>

P.S The footer will have dynamic height

Answer 1

Maybe CSS grid is an option for you?

body {
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-rows: minmax(100px, min-content) minmax(200px, min-content) auto minmax(60px, min-content) ;
  grid-template-columns: 1fr;
  min-height: 100vh;
  grid-template-areas:
    "header"
    "slider"
    "content"
    "footer";
}

.header {
  background-color: #e0e0e0;
  grid-area: header;
}

.slider {
  background-color: #e8e8e8;
  grid-area: slider;
}

.contact {
  background-color: orange;
  grid-area: content;
}

.footer {
  background-color: #333;
  color: white;
  grid-area: footer;
}

body > *::before { content: attr(class); }

<div class="header">

</div>
<div class="slider">

</div>
<div class="contact">

</div>
<div class="footer">

</div>