如何实现子Div的大小随着父Div的大小动态的改变而改变

Question

问题背景：
看了这文章：http://blog.csdn.net/dqs78833488/article/details/51392833（24行代码，让你的网页元素任意放大、缩小、拖拽、移动 ）

我也做了一个，

#box {
    width: 50px;
    height: 50px;
    background: #333;
    cursor: move;
    position: absolute;
    top: 30px;
    left: 30px;
}

#box {
    width: 50px;
    height: 50px;
    background: #333;
    cursor: move;
    position: absolute;
    top: 30px;
    left: 30px;
}

    

但是因为我后面的代码中有js在

内 画图 （js图库的echart）：
var myChart = echarts.init(document.getElementById("box"),theme.name);
      myChart.setOption(option);

这样执行之后就会覆盖掉了   

 导致画面中没有那个拖拽的红点。

所以我就在外面加了一个div

 

   

这样画图就在box中画，小红点依旧在右下角。这时我拖动 outer，大家都一起移动，OK满足预期。然后拉动 小红点放大，outer放大了，可是box依旧没有变化。

如何才能实现 子级的 div的大小动态的和父级div的大小一致呢？

也就是 outer拉动调整大小时，box的大小动态的变大变小和父元素匹配。

css和js，jquery实现都可以，如何达成？

Answer 1

用个百分比就可以实现。同时要注意的是如果你是H5标准的页面，要记得给body，html等都加上百分比。原因在于html5标准要求高度或宽度设置成百分比时，参照的是父标签。所以你外面的父div也是要参照它本身的父div，最终会找到html和body这两个身上，所以一定记得设置