I'm facing a problem on my website where the footer moves up when there isn't enough content, causing it to not stick to the bottom. I am trying to find a solution to make the div between the footer and header stretch to fill the available space, ensuring that the footer remains at the bottom without any layout issues.
So far, I have attempted setting the heights to 100% but unfortunately, it did not work as expected.
Here is the relevant HTML code snippet:
<div id="wrapper">
<div id="body_div">
<section id="main_section">
</section>
<aside id="sidebar">
</aside>
</div>
<footer id="footer">
© Copyright by SimKessy
</footer>
</div>
And here is the corresponding CSS code snippet:
body{
width: 100%;
height: 100%;
display: -webkit-box;
display: -moz-box;
display: box;
text-align: center;
-webkit-box-pack: center;
-moz-box-pack: center;
box-pack: center;
background:url('images/bg/bg9.jpg') no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
#wrapper{
max-width: 850px;
display: -moz-box;
display: -webkit-box;
-moz-box-orient: vertical;
-moz-box-flex: 1;
-webkit-box-orient: vertical;
-webkit-box-flex: 1;
background: rgba(0,0,0,0.7);
height: 100%;
z-index: 1;
}
#body_div{
display: -webkit-box;
-webkit-box-orient: horizontal;
display: -moz-box;
-moz-box-orient: horizontal;
color: #000000;
margin-top: 190px;
height: 100%;
}
#main_section{
-webkit-box-flex: 1;
-moz-box-flex: 1;
margin: 20px;
padding: 0px;
height: 100%;
width: 100%;
}
You can visit my site here to see the issue in widescreen mode using the side menu.