manav inder
manav inder

Reputation: 3601

Child div 100% height stretch parent div as well

I have a very simple scenario

Parent Div(height not specified)

Child div has some content and height set to 100%.

Now this child div force its parent to stretch to the full browser window.

Kindly guide.

Upvotes: 3

Views: 11503

Answers (2)

CyberBoy
CyberBoy

Reputation: 753

#ParentDiv {
    position:relative;
    height:auto;
}
#ChildDiv {
    position:absolute;
    /* top/left/right force it to dimensions of parent, if needed */
    top:0;
    left:0;
    right:0;
    height:100%;
}

Your ParentDiv height is AUTO , therefore the child force the Parent DIV to Expand to 100% of the Browser Height. Remove auto from the Parenet DIV. Your Problem will be solved.

Upvotes: 1

PlantTheIdea
PlantTheIdea

Reputation: 16359

Set positions on both.

#ParentDiv {
    position:relative;
    height:auto;
}

#ChildDiv {
    position:absolute;
    /* top/left/right force it to dimensions of parent, if needed */
    top:0;
    left:0;
    right:0;
    height:100%;
}

The parent will stretch to fit the child.

Upvotes: 2

Related Questions