Connecting Tech Pros Worldwide Forums | Help | Site Map

100% height works only if content does not scroll past page bottom

Member
 
Join Date: Jan 2007
Posts: 67
#1: Oct 1 '09
Hi I have created a site with a container div that has a bg image of a drop shadow. I want this to have a height of 100%. I have assigned the body and container divs the property height:100%. This works. However, if the content, inside the container div, expands past the window height and creates a scrollbar this container will not expand with it. The pages can be found here:

http://www.doclommen.com/index2.php
http://www.doclommen.com/css/layout.css

If anyone has experience and any suggestions it would be greatly appreciated.

Thanks,
Shawn

drhowarddrfine's Avatar
Expert
 
Join Date: Sep 2006
Posts: 5,580
#2: Oct 2 '09

re: 100% height works only if content does not scroll past page bottom


The problem perhaps lies with the floated element. Floated elements are removed from the normal flow and can extend past their parent containers. Parents should never expand to contain them. To get a parent container to contain a floated element, you can either float the parent, too, or add 'overflow:auto' to the parent's CSS.

A second problem you may eventually have is your page has no doctype. Without one, browsers go into 'quirks mode' and it's like 1995 all over again. See this article about doctypes for more info.
Reply