asked on 3/18/2017

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.

CSS

Last Comment

Julian Hansen

3/19/2017

Julian Hansen

3/18/2017

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

3/19/2017

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

3/19/2017

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial