I've exhausted all of my options. I've attempted numerous coding examples from various websites and tutorials, but I can't seem to get this to work no matter how hard I try. I'm completely frustrated and ready to give up on figuring it out. CSS just isn't my friend.
Here's what I'm attempting to achieve:
- A static header that always remains on the screen.
- A footer that stays at the bottom of the page, scrolling with the content but appearing at the bottom if there isn't enough content.
- A left menu with a background that extends down to the top of the footer.
The issue I'm facing is getting the background to extend all the way down. It's the classic problem of struggling to have 100% parents, relatives, and absolutes. The code I currently have works fine except for the background. I'm contemplating using an image for the background and having it repeat instead. Here's the code snippet:
<!-- HTML and CSS code -->In the JSFiddle example, my goal is to have the yellow background fill the entire height. Any additional content should cause the whole page to scroll, move the footer to the bottom, and keep the header in place. Currently, everything seems to be working as intended except for the yellow background color not extending the full height.