HTML - Gap between Main content and Footer - asp.net-core

Question

I'm using this footer as reference to my Website but I've detected a situation when the main content is short, which creates a gap between both elements (See image below).
Anyone can give me a hand in this? :) I'll post the necessary code!
#inherits LayoutComponentBase
<div class="sidebar">
<NavMenu />
</div>
<div class="main">
<div class="top-row px-4 auth">
<LoginDisplay />
</div>
#Body
<!-- footer -->
https://codepen.io/scanfcode/pen/MEZPNd (HTML and CSS of Footer is here)
</div>
main CSS:

Answer 1

You may need to update your HTML structure in right panel.
follow
<div class="content">
<h1>Sticky Footer with Negative Margin 1</h1>
<div class="push">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
</p>
</div>
</div>
<footer class="footer">
Footer
</footer>
<style>
html, body {
height: 100%;
margin: 0;
}
.content {
padding: 20px;
min-height: 100%;
margin: 0 auto -50px;
}
.footer,
.push {
height: 50px;
}
* {
box-sizing: border-box;
}
body {
font: 16px Sans-Serif;
}
h1 {
margin: 0 0 20px 0;
}
p {
margin: 20px 0 0 0;
}
footer {
background: #42A5F5;
color: white;
line-height: 50px;
padding: 0 20px;
}
</style>