How to have footer at bottom without adding padding to body content - html

Question

On my page the footer is right under the content, which makes perfect technical sense. However, since the content is short and doesn't fill the whole page, only half of it, this leaves the footer in the middle of the screen. I was wondering how to have the footer at the bottom of the page for whatever screen size it's viewed on. I know this can be done with padding to the body content, or margin on the footer, however I don't know if I could do that to adapt to every screen size. Any help would be appreciated!
CSS
footer {
background-color: #242424;
color: #fff;
margin-top: 50px;
padding-top: 20px;
padding-bottom: 5px;
}
.search_wrapper {
display: inline-flex;
margin-top: 50px;
}
.search_ins {
font-size: 25px;
border: 1px solid #a6a6a6;
border-radius: 25px 0px 0px 25px;
padding: 3.2px 30px;
outline: 0;
width: 600px;
height: 100px;
}
.search_ins:hover .search_ins:focus {
border-color: #a6a6a6;
}
.search_button {
font-size: 30px;
border: 1px solid #a6a6a6;
border-left: 0;
padding: 0 12px;
color: #fff;
outline: 0;
border-radius: 0px 25px 25px 0px;
background-color: #fff;
cursor: pointer;
}

Answer 1

Easiest way to do this is using the vh unit for height of your main content. Assuming a structure similar to the below...
<main>Your content</main>
<footer>Footer</footer>
Set a min-height on your main content that's equal to 100% of you window minus your footer height.
main { min-height: calc(100vh - 60px); }
footer { height: 60px; }
Bam! Footer's always at the bottom, and you don't have to worry about padding, margins, or absolute positioning!

Answer 2

You need to display the parent of the footer as a column flexbox (column is a must because you need the flex items to stack vertically not horizontally); then set the margin-top of the footer to auto.
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
body {
font-family: Arial, sans-serif;
}
.text-center {
text-align: center;
}
.page-wrapper {
min-height: 100%;
display: flex;
flex-direction: column;
}
main {
padding: 0 15px;
}
footer {
background-color: #242424;
color: #fff;
padding: 15px 0;
margin-top: auto;
}
<div class="page-wrapper">
<main id="main">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, dicta. Aut aspernatur ratione, eligendi quis inventore tempore aliquid sequi architecto, natus id deserunt perferendis excepturi sint blanditiis, similique aperiam dicta.</p>
<p>Earum incidunt distinctio repellendus, sequi, voluptate sint aperiam necessitatibus ut, a ipsa officiis ab quasi, odio soluta quos amet praesentium? Nesciunt repudiandae maiores in vel nulla magni aperiam omnis placeat!</p>
</main>
<footer class="text-center">Lorem ipsum dolor</footer>
</div>