<div class="site">
  <div class="content">
    <p>Контент</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem odio inventore illum incidunt optio ipsum ab. Fuga nisi consequatur amet, voluptatum numquam odit cum, dicta minus accusamus, dolorum mollitia ipsum.</p>
    <p>Deserunt accusantium ipsam veritatis enim impedit illum numquam nesciunt, deleniti quae fuga suscipit quidem dolore facilis sint vitae? Vel, quo magni. Sunt recusandae dignissimos quia laboriosam eveniet asperiores velit explicabo.</p>
  </div>
  <div class="footer">Прижатый подвал</div>
</div>
html,
body {
  height: 100%;
}
body {
  background: #264653;
  padding: 50px;
  display: flex;
  margin: 0;
  box-sizing: border-box;
}
.site {
  background: #2a9d8f;
  display: flex;
  flex-grow: 1;
  flex-direction: column;
}
.content {
  background: #e9c46a;
  /* убери эту  строку и посмотри на результат*/
  flex-grow: 1;
}
.content,
.footer {
  padding: 15px 20px;
}
.footer {
  background: #f4a261;
  flex-shrink: 0;
  /* для отступа от контента */
  margin-top: auto;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.