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

Question

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 ?

Answer 1

Javascript should do it.

Don't think css can make it.

Answer 2

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 bind ing that code to any events wherein the #child 's size might change.

Answer 3

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