怎样使子div自适应父div的大小
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎样使子div自适应父div的大小相关的知识，希望对你有一定的参考价值。
1、可以在每个图表的setOption后添加window.addEventListener('resize', function () myChart.resize();
2、如果上述办法不行的话，你可以通过window.onresize = function() ..... 来进行调节。
3、但是window.onresize = function() ..... 图表只能根据窗体的大小变化。
4、[removed][removed] $(".index_m").resize(function()echarts.init(document.getElementById('imeter_1')).resize(); 之后图表便可以根据div的变化来自适应。
5、如图所示即完成了自适应。
1、作为外部容器的边框为红色的DIV，没有被撑开。这是因为内部的DIV因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的DIV不会被撑开。
2、在容器DIV内要显示出来的float:left的所有的DIV之后，我们添加了这样的一个DIV：<div style="clear:both"></div> 。
3、在用dojo做Drag & Drop的时候，由于这个DIV是容器DIV的一个字节点，如果这个节点被移动，则会造成排版上的Bug。
4、要显示的蓝框的DIV被移到这个DIV之后，则因为clear:both，它会被强制换一行显示。
5、修改原来的html代码，让外部的容器DIV来使用这个CSS。
如果还希望让子级div的高度占满父级，那么为子级div增加“height: 100%”的样式即可（前提是你的父级div存在固定高度）
怎样让一个div高度自适应浏览器高度
这个方法就大致分为两种吧，第一种，用CSS的方法
第二种，用JS方法
这里暂时只演示第一种，如果第二种，另外@我
示例代码如下：
CSS代码第一种写法
html,bodyheight:100%; margin:0;/**把HTML和BODY的高度设置成100%**/
divheight:100%; background-color:#ccc;/**把你DIV的高度设置成100%**/
CSS代码第二种写法
divheight:100%; position:absolute; width:100%; background-color:#ccc; left:0; top:0;
这里用到position:absolute; 所以HTML和BODY不需要设置100% 参考技术A <!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
<title>test</title>
<style type="text/css">
*margin:0px;padding:0px;
.header
width: 100%;
background: #567;
height: 100px;
#col1, #col2, #col3
float: left;
width: 80px;
background: #DDD;
margin-right: 10px;
word-wrap:break-word;
font-size:12px;
#footheight:100px; background-color:#ccc;clear:both;
#middle zoom:1;
</style>
</head>
<body>
<div class="header" id="XX">header</div>
<div id="middle">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
<div id="foot"></div>
<script>
total = document.documentElement.clientHeight;
colHeight = total-100-document.getElementById("col1").offsetTop;
document.getElementById("col1").style.height=colHeight+"px";
document.getElementById("col2").style.height=colHeight+"px";
document.getElementById("col3").style.height=colHeight+"px";
</script>
</body>
</html> 参考技术B 让一个div高度自适应浏览器高度的方法：
1、获取到window的innerHeight、clientHeight根据这两个参数定义div的高度。
function resizeElementHeight(element)
var height = 0;
var body = window.document.body;
if (window.innerHeight)
height = window.innerHeight;
else if (body.parentElement.clientHeight)
height = body.parentElement.clientHeight;
else if (body && body.clientHeight)
height = body.clientHeight;
element.style.height = ((height - element.offsetTop) + "px");
2、定义div的高度的方法：
document.getElementById("yourDiv").height = height；
以上是关于怎样使子div自适应父div的大小的主要内容，如果未能解决你的问题，请参考以下文章