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;">

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 ?


Javascript should do it.

Don't think css can make it.

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: (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.

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

Need Your Help

Roundoff error between Visual Basic and Javascript

javascript excel node.js excel-vba vba

I found a VB script in an Excel file that implements Runge-Kutta integration for solving a differential equation. I converted the implementation line by line to Javscript. However, the Javascript p...