父div随着子div的高度改变而改变

最新推荐文章于 2024-03-15 14:28:09 发布
最新推荐文章于 2024-03-15 14:28:09 发布
阅读量8.3k 收藏 3
点赞数 3
分类专栏： css 文章标签： 父div高度问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013363256/article/details/51023633
版权

父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设置高度，子div为标准流(即未设置浮动)

<style type="text/css">
.aa{
    height:50px;
}
</style>
<body>
    <div class="aa">父div
        <div class="bb">子div</div>
        <div class="cc">子div</div>
    </div> 
</body>
此时的父div高度不会随着子div的改变而改变

情况3:父div未设置高度，子div脱离标准流(设置了float)

<style type="text/css">
.aa{
    height:50px;
}
.bb{
    float:left;
}
.cc{
    float:left;
}
</style>
<body>
    <div class="aa">父div
        <div class="bb">子div</div>
        <div class="cc">子div</div>
    </div> 
</body>
此时的父div的高度不随子div的高度改变而改变，但在父div中加overflow:hidden就可实现随着子div高度的改变而改变。
u013363256
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
父元素高度不随子元素变化
滕青山博客
03-14 1276
一般而言，父级元素不设置高度时，高度由随内容增加自适应高度。当父级元素内部的子元素全部都设置浮动float之后，子元素会脱离标准流，不占位，父级元素检测不到子元素的高度，父级元素高度为0。 所以设置padding可能无效。 因此，需要给父级加个overflow:hidden属性，这样父级的高度就随子级容器及子级内容的高度而自适应 更多overflow:hidden用法见 关于overflow:hidden的作用（溢出隐藏、清除浮动、解决外边距塌陷等等）_Emily-CSDN博客 ...
div不能自适应高度不能随图片的高度变化
09-25
div的高度是0，不能随图片的高度变化，那么div如何才能够自适应高度呢？下面有个不错的方法，大家可以尝试下
css中实现子父元素高度自适应子元素高度
朱宏的博客
10-18 4769
先说明下问题，需求是child2中字数不固定，需要实现parent随着child2的高度变化而变化： 解决办法： parent： position:relative; child： position:absolute; height:100%; 解释：当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元...
让div父元素的高度随子元素高度的变化而变化
热门推荐
friendan的专栏
04-02 4万+
先看下html代码： test /* main是父元素没有设置高度，我们想让其随子元素高度的变化而变化*/ #main{width:800px; border:5px solid red;} #left{width:400px; height:200px; background:green; float:left;} #right{width:200
父元素没有继承子元素的高度和宽度
最新发布
weixin_49352307的博客
03-15 328
子元素浮动 脱离标准文档流 需要利用overflow-hidden，才能显示父盒子高度。
js获取元素的偏移量offset简单方法(必看)
10-19
下面小编就为大家带来一篇js获取元素的偏移量offset简单方法(必看)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
设置DIV最小高度以及高度自适应随着内容的变化而变化
01-19
在应用DIV布局时，有时会希望DIV的高度会随着内容的变化而变化，但是又想设置DIV的一个最小高度，特别是当DIV有背景色或背景图片时最小高度的设置会使视觉效果更好。可以通过如下属性的设置达到效果： 复制代码代码如下: <html xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <title>设置div最小高度及高度自动伸展的实例</title> <style> .divHeight{height:400px;h
jquery实现动态改变div宽度和高度
10-24
主要介绍了jquery实现动态改变div宽度和高度，效果非常不错，而且兼容性也很好，有需要的小伙伴可以参考下。
html父级高度随着子集变化,当子级元素浮动时让父级元素高度自适应的三种方法（以及多个子集元素同时存在浮动和绝对定位时的问题的解决办法）...
weixin_36307377的博客
06-17 1154
例如：我是child效果： 这就是我们经常遇到的问题了，即子级元素浮动的时候父级元素的高度就塌方了……，不过淡定，我们首先就可以想到为父级元素设置高度这种方法来解决的嘛，不过，我们要自适应！自适应！自适应！不要强迫让父级元素站起来，那么，这个时候我们有如下三种方法让父级元素自觉地站起来为子级元素撑起一片天空。方法一：这个方法比较常用，即为父级元素添加：overflow: hidden;这样就好了...
css高度自适应-父元素随子元素变化
Jared864的博客
03-31 6547
Day16 1、 min-height IE6不兼容问题 正常项目中：最小高度直接用min-height即可。 如果考虑兼容：min-height IE6不兼容。IE6默认把height解析成最小高度。若height 和min-height同时出现，IE6执行的事height固定高度。 最小高度的兼容设置方法：（了解：体会解决问题的思路） 1：min-height:300px;_height:30...
【css】div父元素根据子元素高度自适应高度
weixin_30654419的博客
04-24 874
两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！ 解决这个问题的根源就是清除浮动： 1 , 给父节点增...
父元素随着子元素高度改变而改变
scwMason的博客
10-31 1808
转载自https://blog.csdn.net/friendan/article/details/51043760
Div父容器不根据内容自适应高度的解决
05-07
当Content内容多时，即使main设置了高度100%或auto。在不同浏览器下还是不能完好的自动伸展。内容的高度比较高了，但容器main的高度还是不能撑开。
父元素跟随子元素margin-top移动
qq_55846083的博客
07-10 239
父子元素外边距合并问题
解决子元素浮动，父元素高度变小的问题
weixin_30886233的博客
10-12 175
当子元素浮动时，脱离了文档流，不占据原来的页面空间，使父元素的高度变小，甚至为0，我们可以通过几种方式来解决这个问题。 解决办法如下： 1.设置父元素的overflow为hidden。缺点：把本应该显示的元素隐藏。 2.在知道父元素本应该是多高的情况下，设置父元素的高度。缺点：不知道父元素高度的不适合。 3.添加空的块级元素，并设置其style属性值为clear:both；例如：<d...
html行高与父div一样,CSS子元素跟父元素的高度一致的实现方法
weixin_42366533的博客
06-17 1862
绝对定位方法：(1)将父元素设置为相对定位，不写父元素的高度时，会随着左边的子元素高度变化而变化.parent {/*关键代码*/position: relative;/*其他样式*/width: 800px;color: #fff;font-family: "Microsoft Yahei";text-align: center;}(2)左边一个元素有个最小高度的情况.left {min-hei...
子元素绝对定位，父元素高度自适应子元素高度
dongkan8129的博客
07-26 1968
子元素设置了绝对定位，父元素没有设置相对定位，因此子元素脱离了文档流，父元素高度就变成没有了，如何让父元素高度自适应子元素高度。 子元素的高度是不确定的 可以JS设置父元素高度 <body><<span class="<<span class=" hljs-keyword" style="box-sizing: border-b...
父容器高度根据子容器变化
赵思远的博客
08-21 1300
在其他博客上看到了一片关于父容器高度自动变化的博文，发现自己也不是全都知道，学习后分享给大家； 原来一直设置父元素高度为auto，但发现效果并不对，一直以来都没有思考这个问题； 想要设置父元素高度随着子元素自动变化，有以下几种方式可以参考： 1.清除浮动 <style type="text/css"> .child{ width: 100px; height: 10...
echart饼图大小随着父div的大小变化而变化
06-06
要实现 ECharts 饼图的大小随着父 div 的大小变化而变化，可以使用 ECharts 提供的 `resize` 方法和 `window` 对象的 `resize` 事件。 具体做法如下： 1. 在 HTML 中定义一个 div 作为 ECharts 的容器，给它设定一个固定的宽度和高度，如下所示： ```html <div id="chart-container" style="width: 600px; height: 400px;"></div> ``` 2. 在 JavaScript 中初始化 ECharts 实例，并将其绑定到上面定义的 div 容器上： ```javascript var chart = echarts.init(document.getElementById('chart-container')); ``` 3. 在 ECharts 实例中定义饼图的数据和配置项： ```javascript var option = { // 饼图的配置项 series: [{ type: 'pie', data: [...], radius: '50%', // 其他配置项... }] }; chart.setOption(option); ``` 4. 在页面加载时，调用 `resize` 方法，使 ECharts 实例自适应容器的大小： ```javascript chart.resize(); ``` 5. 监听 `window` 对象的 `resize` 事件，当窗口大小发生变化时，再次调用 `resize` 方法： ```javascript window.addEventListener('resize', function() { chart.resize(); }); ``` 这样，当父 div 的大小发生变化时，饼图的大小也会自动调整，保持和容器的比例相同。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值