Question

I’m not entirely sure what I’m doing wrong, and I can’t figure out how to Google it because a common mistake is very prevalent. I have the parent’s height explicitly set, but I can’t get #main-sub-content ‘s height to 100%.

Here’s the page:
http://coloryourspot.vadremix.com/

And the corresponding CSS:
http://coloryourspot.vadremix.com/styles/primary/main.css

Can anyone spot the issue?

Solved: The problem was the parent element had height:auto!important;

Answer 1

Remove this attribute:

div#main-content{height:auto!important}

and things works fine in Chrome.

But since your #main-sub-content is min-height:100%, your #footer-clear will be put out of screen. You may have to work that out later.