100% div height

Question

I have a #main div that I would like to fill a page between the header and footer when there is no content. When there is content, it should push the sticky footer what 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 am not sure why this is not working. #main inherits from #wrapper and body , so I think setting 100% height and a minimum height of 100% will work.

Site:

http://www.dentistrywithsmiles.com

Thanks in advance for your help.

Answer 1

This is that height: auto !important; somewhere near line 146 your CSS file.

It overrides the 100% height of your wrapper, which prevents your main div from growing. Since your footer has a constant height, I would try to add an addition to the wrapper so that the main content of the div does not eat in the footer, which happens when you rotate height: auto !important; .

Answer 2

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