CODEWITHSUNDEEP
htmlcss
Tudor
Tudor

Reputation: 1181

How to make parent div grow in height along with its child that has fixed position?

i have these 2 divs : 

<div id="parent" style="border:1px silid;background-color:#fff">
    <div id="child" style="position:fixed;width:100px;height:100px; border:solid 1px;">
    </div> 
</div>

Bascally i want the fixed child to stay inside the parent div , so the parent div should resize its height every time the page scrolls down (the child moves down).

Is there a css solution or should i make it in js ?

Upvotes: 0

Views: 1396

Answers (3)

Serge
Serge

Reputation: 1

You should try to apply "overflow: hidden;" to your parent in your CSS. Remove "height" attribute (or set it to "auto"), as well.

Upvotes: 0

Cat
Cat

Reputation: 67522

You cannot do this with CSS (children cannot control parents through CSS, sadly).

You can, however, do this in JavaScript. You can use .height() and .width() from the parent's perspective, using the value of the child's .outerHeight() and .outerWidth() as values.

Here is a fiddle: http://jsfiddle.net/TfNXs/ (I changed a few things in the styling to make the changes easier to see.)

Note that I've only done it on page load; you may want to think about binding that code to any events wherein the #child's size might change.

Upvotes: 1

user1619962
user1619962

Reputation: 374

Javascript should do it.

Don't think css can make it.

Upvotes: 1

Related Questions