100% height div

Question

I have a #main div that I'd like to fill the page between the header and footer when there is no content. When there is content, it should push the sticky footer down, which it does.

CSS:

#main {
 background: transparent url("images/main-content.png") top right repeat-y;
 clear: both;
 overflow: hidden;
 margin-top: -10px;
 height: 100%;
 min-height: 100%;
}

I'm not sure why this isn't working. #main inherits from #wrapper and body , so I'd think setting up 100% height and min-height of 100% would work.

Site:

http://www.dentistrywithsmiles.com

Thanks in advance for your help with this.

Answer 1

It's that height: auto !important; somewhere near line 146 of your CSS file.

It's overriding the 100% height of your wrapper, which isn't letting your main div grow. Since your footer has a constant height, I would try adding a padding to the wrapper to make the main content div not eat into the footer, which is what happens when you turn of the height: auto !important; .

Answer 2

Add display:inline-block to #main (or to #wrapper , depending on what you want to do). Items with display:block (such as a div or p tag by default) have 100% width and height that adjusts to the content.