footer which fill the whole bottom - css

Question

I would like to fill the whole free bottom space (white color) in case of display with a big width (bigger than content) so how to set css3 style to do this?
CSS:
.footer {
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family:Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size:0.9em;
font-weight:400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align:center;
}
https://jsfiddle.net/3re9wbr2/1/

Answer 1

First, adding margin: 0 to the html/body tag will give you this
html,
body {
margin: 0;
}
.footer {
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family: Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size: 0.9em;
font-weight: 400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align: center;
}
<div class="section">
<div class="container">
<div class="title-area">
<div class="gallerygrid">
<h5>content ldosalodaslodlsoalodslaodasol</h5>
<h5>content ldosalodaslodlsoalodslaodasol</h5>
</div>
</div>
</div>
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
<div class="copyright">
©
<script>
document.write(new Date().getFullYear())
</script> · Lorem Ipsum · All Copyright reserved
</div>
</footer>
Second, adding a wrapper using display: flex with a min-width: 100vh and give the .footer flex: 1 will give you this
html,
body {
margin: 0;
}
.wrapper {
min-height: 100vh;
display: flex;
flex-direction: column;
}
.section {
}
.footer {
flex: 1;
background-color: #FFFFFF;
line-height: 20px;
/*border-top: 1px solid #DDDDDD;*/
overflow: hidden;
}
.footer .copyright {
font-family: Lato;
color: #f6f6f6;
padding: 10px 15px;
margin: 15px 3px;
line-height: 20px;
text-align: center;
font-size: 0.9em;
font-weight: 400;
}
.footer-color-black,
.footer-transparent {
background-color: #595324;
color: #DDDDDD;
text-align: center;
}
<div class="wrapper">
<div class="section">
<div class="container">
<div class="title-area">
<div class="gallerygrid">
<h5>content ldosalodaslodlsoalodslaodasol</h5>
<h5>content ldosalodaslodlsoalodslaodasol</h5>
</div>
</div>
</div>
</div>
<footer class="footer footer-big footer-color-black" data-color="black">
<div class="copyright">
©
<script>
document.write(new Date().getFullYear())
</script> · Lorem Ipsum · All Copyright reserved
</div>
</footer>
</div>

Answer 2

Sounds like you want a sticky footer.
Ryan Fait's method works well.