bandaoyu
2017-09-24 01:51
采纳率: 77.8%
浏览 9.2k

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

问题背景:
看了这文章: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实现都可以,如何达成?

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

9条回答 默认 最新

  • Young_Gao 2017-09-25 07:08
    已采纳

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

    点赞 评论
  • 阿小狸 2017-09-24 02:56

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

    点赞 评论
  • 阿小狸 2017-09-24 03:02

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

    点赞 评论
  • hello_realWorld 2017-09-24 03:06

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

    点赞 评论
  • 鼠小 2017-09-24 03:13

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

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

    点赞 评论
  • TT卡卡卡 2017-09-24 13:50

    用百分比类似于:
    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%';
    把长宽放在后面加载出来

    点赞 评论
  • 面向对象的夜猫子 2017-09-24 14:05

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

    点赞 评论
  • IT珂学家 2017-09-29 02:04
    点赞 评论
  • 爱踢球的小猪 2017-10-09 07:58

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

    点赞 评论

相关推荐 更多相似问题