如何实现子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这两个身上，所以一定记得设置

Answer 2

里面的div，"display:block;"，然后设置宽度和高度"width: 100%; height: 100%;"。。。

Answer 3

不知道你的js画图是什么意思，如果是属于插件的，那么不给这个插件设置宽度和高度，让插件自适应，外层写好宽度和高度是可以适应的。
这个插件我也没用过，类似的图表插件也用过不少，都是能自适应的，只不过我遇到有几个变态的需要给外层的div加"!important"。
不好意思，刚进来看标题以为是个普通div，现在看到插件了，也不敢妄自菲薄，只能是靠我以前的一点经验来判断的，如有不对请见谅。

Answer 4

子div设置成百分比，就变了

Answer 5

小的那个div长宽设置百分比就行，，

就是相对于大的，，占多少百分比

Answer 6

用百分比类似于：
width: 50%;
height: 50%;
动态的可以用js加载出来，类似于：
document.getElementById('div').style.width = '50%';
document.getElementById('div').style.height = '50%';
可以这样写
var myChart = echarts.init(document.getElementById("box"),theme.name);
myChart.setOption(option);
document.getElementById('div').style.width = '50%';
document.getElementById('div').style.height = '50%';
把长宽放在后面加载出来

Answer 7

子DIV这样加属性width:inherit;height:inherit;

Answer 8

给你个网址，http://v3.bootcss.com/css/，有些问题不是不会，就是不想去思考，老想等现成的，好好检查一下，要么查百度，实在不行再问

Answer 9

响应式设计，宽高可以用百分比