Appreciate your help. I'm currently facing an issue with the "content" and "footer" sections within the "wrapper" element. Below are the styles for these elements:
#content
{
width: 100%;
min-height: 100%;
position: relative;
background-color: #b2b2b2;
}
#footer
{
width: 100%;
min-height: 40px;
position: relative;
bottom: 0;
background-color: #e23e23;
}
#wrapper
{
width: 100%;
height: 100%;
background-color: green;
position: fixed;
top: 0;
left: 0;
}
Everything is working fine so far, except that I want the content section to occupy the remaining height of the page (excluding the footer). However, every method I try results in the content extending below and under the footer if it's overfilled.
In simpler terms, I want the content and footer to fill the window's height, but if the content exceeds the space available, it should push the footer down and introduce a scroll bar.
Is there a CSS solution for this challenge, or would I need to use JavaScript?