asked on

Overflow: auto does not stretch with position: absolute

Hi Experts,

Can anyone tell me why I am getting a scroll bar with the following when I am expecting for the div to automatically stretch vertically?

#divMobileMenuHeader{
    display: block;
    float: left;
    overflow: auto;
    padding-top: 10px;
    width: 100%;
    text-align: center;
    position: relative;
    outline: 2px solid red; 
}

#divMobileMenuContact{
    position: absolute;
    width: 100%;
    overflow: auto;
   /* display: none;*/
   /* background-color: cyan;*/
}

Open in new window

Here is what I am referring to: http://aces-project.com/2017/_NEW.php below the (866) 000-9999 the email address does not show.

Julian Hansen

You have overflow: auto on all the parent div's
mobile.css line 22

#divMobileMenu {
	background-color: #013A17;
	clear: both;
	display: block;
	overflow: auto; /* <==== HERE */
}

Open in new window

Line 28

#divMobileMenuHeader {
	display: block;
	float: left;
	overflow: auto;  /* <==== HERE */
	padding-top: 10px;
	width: 100%;
	text-align: center;
	position: relative;
	outline: 2px solid red;
}

Open in new window

Those are what is causing the scroll bars.

APD Toronto

ASKER

When I remove Li. 22 (overflow: auto), I loose the green background.

I thought that overflow: auto forces the div to expand with the content - that's why I'm not getting the green background.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial