如何实现子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个回答

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

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

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

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

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

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

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

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

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
如何实现子Div的大小随着父Div的大小动态的改变而改变
n问题背景:n看了这文章:http://blog.csdn.net/dqs78833488/article/details/51392833(24行代码,让你的网页元素任意放大、缩小、拖拽、移动 )nn![图片说明](https://img-ask.csdn.net/upload/201709/24/1506217843_84707.png)n我也做了一个,nnnn#box n    width: 50px;n    height: 50px;n    background: #333;n    cursor: move;n    position: absolute;n    top: 30px;n    left: 30px;nnnn#box n    width: 50px;n    height: 50px;n    background: #333;n    cursor: move;n    position: absolute;n    top: 30px;n    left: 30px;nnnnn    nnnnn但是因为我后面的代码中有js在内 画图 (js图库的echart):nvar myChart = echarts.init(document.getElementById("box"),theme.name);n      myChart.setOption(option);nn这样执行之后就会覆盖掉了    导致画面中没有那个拖拽的红点。nn所以我就在外面加了一个divnnnn n   n nn这样画图就在box中画,小红点依旧在右下角。这时我拖动 outer,大家都一起移动,OK满足预期。然后拉动 小红点放大,outer放大了,可是box依旧没有变化。nn如何才能实现 子级的 div的大小动态的和父级div的大小一致呢?nn也就是 outer拉动调整大小时,box的大小动态的变大变小和父元素匹配。nncss和js,jquery实现都可以,如何达成?n
父div随着子div的高度改变而改变
父div随着子div的高度改变而改变问题情况1:父div未设置高度,子div为标准流(即未设置浮动)<body> <div class="aa">父div <div class="bb">子div</div> <div class="cc">子div</div> </div> </body>此时的父div随着子div的改变而改变 情况2:父div设置
javascript div动态大小改变
div id="divtest" style="height: 100px; background: #f00;">div> input type="button" onclick="disappear();" value="消失" /> <script type="text/javascript"> function disappear(
改变div大小
设置一个div, rn然后在下面设置两个输入框:长度:()宽度()rn点击“设置”按钮,改变div大小rn请问如何用javascript实现?谢谢!
div拖动改变大小
最近在做个页面,需要首页模块可拖动并且编辑大小,首页用到的基本上是div标签, 由于个人不是搞前端的,js真心不是很熟~~~,网上搜索了一些资料,基本上都不完整,都有一定的缺少部分! 于是自己结合网上的多篇资料,整合了一份,可以div拖动改变大小的html代码例子,有这方面需要的可以参考下: 以下是效果图: Html代码如下(直接复制保存为html文件即可运行): &lt;!DOC...
DIV大小改变???
在拖曳IE窗体大小时,如何让里面的DIV也跟着改变大小????
div块的大小随着内边距改变
div元素的width和height已经设置为固定值,但是当我改变padding的时候,div的大小却会改变。为什么呢,不明白究竟是怎样的。rn[code=html]rnrnrn rnrnrnrn rn rnCSS is fun!rnrn rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnThis is some text. This is some text. This is some text.rnrnrnrnrnrnrn[/code]rnrnpadding为25时的情况:rn[img=https://img-bbs.csdn.net/upload/201712/04/1512374749_115432.png][/img]rnpadding为5时的情况:rn[img=https://img-bbs.csdn.net/upload/201712/04/1512374789_681689.png][/img]
如何使控件的大小随着Form的大小改变而改变
我创建一个工程,其中View以Form为基类rn然后我放一个我自定义的控件进去rn我想控件可以随着Form的改变而改变rn应该怎样?HELP!
如何使listControl的大小随着窗口的大小改变而改变
如题,谢谢!
div里的table如何跟着div的大小而改变大变?
是这样的,div里有一个table,table里的每个单元格都是一个img。那么如何让table单元格里的img跟着div的大小改变呢?知道当div里的table没有数据或数据没有完全点满td时,table是跟着div变化大小的。但一单变div的宽度小于table中td里的数据宽度时,table就不跟着div的大小而改变了。想问下有没有方法一直让table的大小跟着div的大小改变?rnrn样例代码如下:rnrnrnrn chinamaprn rnrnrnrnrn rnrn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rn rnrnrnrnrnrnrn
html5 改变div的大小svg也随着改变???
div大小的改变可不可以让svg的的大小也跟着改变?怎么用js 怎么控制svg的高度和宽度?
.net开发微博 怎样能div 随着内容的大小而改变div的大小
.net开发微博 怎样能div 随着内容的大小而改变div的大小 菜鸟就大神啊 rnrnrn 在网吧 没截图 就是比如我有5条数据 在一个div中加载 如果新增一条数据 则也显示到div中 我把div的大小设置成默认的200px 怎样能让他随着内容的大小而改变大小 rnrnrnrn越详细越好 谢谢 祝大家新年快乐
可拖动改变大小的div
这个该如何写rn给点思路或者例子
第二个div高度随着父div高度改变而改变的几种实现方式
最近遇到这样一个需求,一个大的div高度不固定,里面有两个小的div,第一个div高度固定(比如为100px),第二个div高度填满大div的剩余高度。实现也很简单,想到了好几种实现方式,记录一下。 因为外面大的div高度不固定,我在这里就默认填满body。 1、定位:外面大的div相对定位,第二个div绝对定位,设置top:100px。代码如下:outer设置overflow:hidden去
拖拽+拖拽改变div大小
拖拽并同时拖拽改变div大小暂无兼容性问题
JavaScript改变地图DIV大小
范例使用SuperMap iClient 7C for JavaScript开发模式,实现改变地图DIV大小。
怎样才能让dbgrid大小随着窗体大小的改变而改变
怎样才能让dbgrid大小随着窗体大小的改变而改变
父div随着子div的增高而增高
我有父div的样式如下:rn.parent rn margin:auto;rn width:800px;rn border:1px solid #ccc;rn rnrn子div的样式:rn.a rn width:220px;rn border-style:none;rn float:left;rn margin:20px;rn padding-top:5px;rn background-color:#99CCFF;rnrn代码:rn rn asdfadsfasdfadfrn为什么当我随着子div里的内容越来越多的时候,父div不会随着增高呢?
请问如何使得div的背景图片自动适应div的大小。div的大小也是随着输入内容的多少而自动改变的。
如题。谢谢!!
关于Echarts图表根据div大小的改变而改变的问题
var fhchart = echarts.getInstanceById($(&quot;#desk_ygz&quot;).attr(&quot;_echarts_instance_&quot;));//获取echarts对象 if (fhchart) { setTimeout(&quot;echarts.getInstanceById($('#desk_ygz').attr('_echarts_ins...
背景图片随div的大小而改变其大小
背景图片随div的大小而改变其大小,我的div是可以人为改变的
DIV层拖动的实现,可改变大小.
DIV层拖动的实现,可改变大小.DIV层拖动的实现,可改变大小.
##########如何让div随window.resize改变大小############
我用div给table做了阴影的效果,但是发现window在resize之后,div大小不变rn请问如何能使div 在window resize之后符合table的大小??rnrnrnrnrn rnrnrnrn rn rn rn rn rn rn rn rn rn rnrnrnrn
窗口分割后的大小如何随着窗口大小的改变而改变
这是我编的一个多文档窗口分割程序:rnBOOL CBEAMFRAME::OnCreateClient(LPCREATESTRUCT lpcs, CCreateContext* pContext) rnrn // TODO: Add your specialized code here and/or call the base classrn CRect rect;rn GetWindowRect(&rect);rn int xx,yy;rn xx=(rect.right-rect.left)/2;rn yy=(rect.bottom-rect.top)/8;rnrn BOOL ret=m_wndSplitter.CreateStatic(this,8,2);rn ret|=m_wndSplitter.CreateView(0,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext); rn ret|=m_wndSplitter.CreateView(2,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,0,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rnrn ret|=m_wndSplitter.CreateView(0,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(1,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(2,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(3,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(4,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(5,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(6,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn ret|=m_wndSplitter.CreateView(7,1,RUNTIME_CLASS(CBEAM),CSize(xx,yy),pContext);rn return ret;rn rn但是程序运行以后列的宽度不是窗口的1/2,行的高度也不是1/8,窗口最大化以后也不随着改变。rn可求大家帮忙!
如何表格随着对话框大小改变而改变
我在一个对话框上制作了一张表格,代码如下,在oncreat中完成rnint CCDDlg::OnCreate(LPCREATESTRUCT lpCreateStruct) rnrn if (CDialog::OnCreate(lpCreateStruct) == -1)rn return -1;rn rn m_list.Create(rn WS_CHILD|WS_VISIBLE|WS_BORDER|LVS_REPORT|LVS_EX_GRIDLINES, CRect(10,50,600,200), this, 1);rnrnrn DWORD dwStyle = m_list.GetExtendedStyle();rn dwStyle |= LVS_EX_FULLROWSELECT; //选中某行使整行高亮(只适用与report风格的listctrl)rn dwStyle |= LVS_EX_GRIDLINES; //网格线(只适用与report风格的listctrl)rn dwStyle |= LVS_EX_CHECKBOXES; //item前生成checkbox控件rn //dwStyle |= LVS_SHOWSELALWAYS ;rn m_list.SetExtendedStyle(dwStyle); //设置扩展风格rnrn m_list.InsertColumn( 0, "地点", LVCFMT_CENTER , 100 );//插入列rn m_list.InsertColumn( 1, "温度", LVCFMT_CENTER, 100 );rn m_list.InsertColumn( 2, "温差", LVCFMT_CENTER, 100 );rn m_list.InsertColumn( 3, "楼层", LVCFMT_CENTER, 100 );rn m_list.InsertColumn( 4, "楼层图", LVCFMT_CENTER, 100 );rn m_list.InsertColumn( 5, "温度曲线", LVCFMT_CENTER, 100 );rn GetClientRect(&m_rect);rn return 0;rnrn现在对话框设置未可变动的,我想问下,如何使得我设置的列表的矩形范围随着对话框的变动而变动呢。rn也就是m_list.Create(rn WS_CHILD|WS_VISIBLE|WS_BORDER|LVS_REPORT|LVS_EX_GRIDLINES, CRect(10,50,600,200), this, 1);rn中的CRect()中的参数要如何设置。希望有类似经验的朋友能提供点思路,小弟在这里叩头了~~
DBComboBox 如何随着表格项大小改变而改变?
DBComboBox 如何随着表格项大小改变而改变?rnrn我做了一个数据库表格 rn姓名 性别 年龄 等 我用DBComboBox做下拉菜单 选择男女 但是我把性别栏拉长DBComboBox会跟着变长但是 我想再把DBComboBox缩短 DBComboBox就无法变小了请问 如何使DBComboBox随着表格项大小改变而改变?
如何随着页面的大小而改变空间的大小
我的页面上有一个panel,需求是随着页面的大小而改变这个panel的大小,我的代码是:rnfunction size()rnrn $("Panel2").style.Height = (document.body.offsetHeight - 200);rnrnfunction $(str)rn rn return(document.getElementById(str)); rnrnwindow.onload = window.onresize = size;rnrnrn但是,没有达到随着页面大小的变化而改变这个panel的大小,请问该如何做,谢谢各位高手,谢谢了。
控件如何随着窗体大小的改变而改变?
我现在有一个窗体,里面有些小控件,下面有一个图表控件,我现在设置图表控件的Dock属性为Bottom,当我放大窗体的时候,它会跟着放大,但是跟窗体顶端的距离就加大了,我想在窗体改变时控件与顶端的距离不变,请问要怎么做,我按下面这么做实现不了。[code=C#] rn private void Query_Resize(object sender, EventArgs e)rn rn dataGridView1.Top = 200;rn [/code]
MFC :位图大小如何随着位图按钮的改变而改变
BitmapButton上加载一个位图后,当按钮改变大小后位图保持不变,如何让位图随着按钮的改变而改变,这样看着比较美观
如何控制Div的位置不会因为浏览器的大小而改变!!
<%@ Page Language="vb" enableViewState="True" Codebehind="ブロジェクト管理画面.aspx.vb" Inherits="WebApplication1.WebForm1"%>rnrnrn rn WebForm1rn rn rn rn rn rn rn rn rn rn rn プロジェクト名:rn rn rn rn rn rn rn プロジェクトID:rn rn rn rn rn rn rn 仕様書作成間始日:rn rn rn rn rn 仕様書作成終了日:rn rn rn rn rn テスト間始日:rn rn rn rn rn テスト終了日:rn rn rn rn rn 使用した人日数:rn rn rn rn rn 主な機能と特徴:rn rn rn rn rn rn rnrnrn问题: 我想通过层实现当查询的时候显示Dropdownlist,在新增记录的时候显示Input,问题是怎么定位Dropdownlist和Input总是保持在同一个位置,不会因为浏览器的大小而发生位置的错乱!!! 那位大哥帮帮忙! 小妹万分感谢!!
如何使div根据里面内容而改变大小
1.display: inline-block;2.width: auto; height: auto;
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
如何动态修改div大小?
我有一个动态创建的div,我想要的效果是:当click时,div四周显示8个控制点,我可以拖拽控制点修改div的大小.rn这样效果的代码怎么写呢?我在网上也没有找到,希望大家帮帮我!rn谢谢了!
子对话框 改变大小
我在住对话框中用picture控件IDC_PLACEHOLDER,装载子对话框IDD_MODECALLrn CRect rc;rn GetDlgItem(IDC_PLACEHOLDER)->GetWindowRect(rc);rn m_modecall=new CModecalldlg;rn m_modecall->Create(IDD_MODECALL,this);rn ScreenToClient(&rc);rn m_modecall->MoveWindow(rc);rn m_modecall->ShowWindow(SW_SHOW);rn现在需要主对话框改变大小时子对话框相应的改变大小,现在我在主对话框的onsize函数中,利用IDC_PLACEHOLDER的MoveWindow()函数改变picture控件的大小,但是子对话框的大小并没有改变,请问是什么原因?有什么解决办法?
如何在脚本中让div 随着窗体大小改变而改变位置
function fixSize() rn contentDiv.style.height = document.body.offsetHeight - 10;rn rnrn window.onload = fixSize;rn window.onresize = fixSize;rn这样做 加断点以后发现根本没有执行
echarts自适应父div大小
百度了n种办法,试了n种办法后终于测出来了。 方法一:window.onresize=myChart.resize;  但是没有效果 方法二: window.addEventListener(&quot;resize&quot;, function () {           myChart.resize();         }); 依旧没有效果 方法三: &amp;lt;div class=&quot;summ...
子div 遮盖 父div
在开发页面UI有这么一个要求,要对图片有一个遮盖的效果,表示活动已经结束,   自己根据这个要求写了一个demo,仅供学习参考   例子:子div实现透明效果遮盖父div $(function(){ console.log($(".parent").height()); console.log($(".parent").width()); $("
实现div的大小随着内容进行动态改变
div的动态改变有两种方式:1.使用百分比的形式来实现div的动态改变的实现代码: #id{ width: 30%; height: 40%; } /* 这样一来,该div的宽度和高度将始终分别对应于浏览器的宽度的30%和40% */2.指定最小值来让浏览器自动实现div动态改变的实现代码: #id{ min-width: 100px; min-height: 200px; } /*
子div在父div的底部
其实就是子div   postion:relative  ;bottom  :0px    relative是相对父组件   而absolute 当父组件没有position时以浏览器为标准(这个网上看的-自己试试看对不对)         &amp;lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.1 Transitional//EN&quot; &quot;http...
8个点改变div大小js
根据这个思路可以做很多东西,我做了一个看图片的可以在web上任意拉伸图片大小。这个很有帮助。
相关热词 c# 标准差 计算 c#siki第五季 c#入门推荐书 c# 解码海康数据流 c# xml的遍历循环 c# 取 查看源码没有的 c#解决高并发 委托 c#日期转化为字符串 c# 显示问号 c# 字典对象池

相似问题

4
怎么获取一个div内所有小div,判断有没有img并获取src 和 父类 a 的href
4
css怎么让几个div显示在一个div中,且ul也显示在这个div中
3
多个子div如何不用float实现平行排列并平均占满父div的宽度?
5
如何实现子菜单的滚动样式
3
js实现子1div拖进2div并跟随2d一起托动并1d可在2d随意拖动但不能超过2d的范围
11
如何实现textarea中输入@在右下方出现一个div
12
如何实现textarea中输入@在当前文本的右下方出现一个div,里面选择人名
11
一个div需要不停的出现,问题是需要实现位置变化
1
如何获取angularjs动态生成的div对象
3
javascript编程语言怎么实现拖动div并且保存div的布局
3
javascrpt语言里怎么实现div点击以后通过文本框给它更新的功能,html的实现?
4
怎么在javascopt语言的开发中实现div双向判断对应的input?
2
javscript编程语言怎么实现双向页面的div直写,和判断页面的代码怎么结合起来?
10
用JQuery实现在div1后追加多个有内容的div2,并实现div2里面的元素的id自增
2
h5怎么实现javascrip语言判断div的高度如何实现自适应的高度?怎么用代码实现页面判断?
2
javascrpt语言怎么在html5页面上实现多个div环绕排列,内容不重叠的显示?
1
怎么利用javascapt语言实现3个div的排列的顺序的排序操作?怎么对3个div排列?
1
javascript怎么实现对多个html+div实现的css的界面先判断后显示?
1
javascript实现div从html中导入操作,从html中导入div文档怎么实现?
1
javascrpt语言怎么实现行div跨行的合并,保持div的编辑不变,实现和并,怎么做?