I'm facing an issue where the footer is not sticking to the bottom of the page as intended. When there is less content, it should be displayed without any scroll, and if there is more content, the footer should appear at the end. Here is the code I am currently using:
<div id='wrapper'>
<div id="top_bar">
</div>
<div id="top_add">
<div if="left_logo">LOGO</div>
<div id="top_add">ADD</div>
</div>
<div id="content" style="height:auto;width:100%;">
<div style="font-size:25px;width:90%;float:left;height:auto;">ABCD
</div>
<div style="width:10%;height:auto;float:right;">ADV.
</div>
</div>
</div>
<div id="foot">
<a href="#">Contact Us</a>
</div>
CSS:
html, body {
height:100%;
width:100%;
margin: 0;
padding: 0;
}
#wrapper {
height:100%;
width:100%;
min-width:1300px;
min-height:100%;
}
#top_bar {
width:100%;
height:45px;
min-width:1200px;
}
#top_add {
margin-left:15px;
height:14%;
width:100%;
min-width:1200px;
min-height:130px;
}
#left_logo {
width:215px;
height:100%;
float:left;
min-width:200px;
padding-left:20px;
}
#right_add {
width:980px;
height:100%;
float:left;
background-color:#E8E8E8;
min-width:750px;
}
#foot {
background-color:#333333;
width:100%;
height:250px;
}
I need some guidance on what may be causing this issue. Currently, when the content size is small, the max-height property takes up the entire page, leaving it empty, and only displays the footer after scrolling. How can I fix this problem?