父元素没有继承子元素的高度和宽度

于 2024-03-15 14:28:09 发布
阅读量399 收藏 8
点赞数 4
分类专栏： Css 文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49352307/article/details/136738937
版权
本文介绍了在CSS中，通过设置`overflow-hidden`属性来处理子元素浮动时，确保父盒子正确计算高度的方法。
摘要由CSDN通过智能技术生成

子元素浮动 脱离标准文档流 需要利用overflow-hidden，才能显示父盒子高度

div{
 overflow-hidden
}

Bunury
关注
专栏目录
css设置元素继承父元素宽度,我如何做一个固定的定位div继承父的宽度？
weixin_36282765的博客
12-22 615
Is there a way a fixed positioned div can inherit the width of a parent?I know fixed width is relative to the window's so this code doesn't work:#wrapper{position: relative;width:500px;height: 20px;ba...
css flex 布局子元素撑大父元素导致页面布局错乱
缚己
05-14 2016
原因是没有给父元素设置一个固定的宽高，导致子元素 flex 的计算延伸到了父元素，给父元素设置固定的宽即可： .main { /* 之前被撑大的外部父元素 */ box-sizing: border-box; padding: 0 30px; border-right: 1px solid #ccc; width: 709px; /* 设置固定的宽 */ } .albums { /* flex 布局父元素 */ width: 98%; display: flex; flex-wr
CSS中父元素高度没有随子元素高度的改变而改变，应该如何解决？
weixin_30367543的博客
10-11 320
如果子元素没有设置浮动(float)，父元素实际上会根据内容，自动宽高进行适应的。 当子元素增加了浮动后，最简单的处理方法是给父元素添加overflow:hidden属性，此时父元素的高度会随子元素的内容自动适应的。 亦或者在子元素的最后一个清楚浮动。 转载于:https://www.cnblogs.com/kingchan/p/5951060.html...
CSS中你不太了解的细节---（一）
松落
10-07 635
1.常用选择器 id选择器 作用：根据元素的id属性值选中一个元素；语法：#id属性值{ }；例子：#box{ }。 类(class)选择器 作用：根据元素的class属性值选中一组元素，可以同时为一个元素指定多个class属性，用空格隔开；语法：.class属性值{ }；例子：.box{ }。 通配选择器 作用：选中页面中的所有元素 语法：* 。 元素选择器 作用：根据标签名来选中指定的元素；语法：标签名{ }；例子：p{ }。 2.复合选择器 交集选择器 作用：选中同时符合多个条件的元素；语法：选
css篇-子元素高度撑满父级（父级未设置高度），同时子元素内文字垂直居中
Sophiego的博客
11-22 2万+
好久未写博客，又回来了，还是得实时督促自己 最近遇到了一个css问题；问题如下 父元素不设置高度，子元素全为（display:inline-block），左侧内容撑开高,想要右侧子元素高度为100%（即与左侧子元素高一致），使用height:100%,并不好使，始终是内容撑开的高，而非父级高， <li v-for="list in lists”>   //父元素 <div...
css里面宽高怎么继承,CSS Flex 弹性盒继承宽高问题
weixin_28795851的博客
08-04 2967
CSS Flex 弹性盒继承宽高问题弹性盒子，自动占据位置的子容器，无法直接继承父级的100%宽高；通过下面两种方式，即可让子容器，继承宽高。垂直高度布局css/*设置为一个弹性盒*/.flexBox{display: flex;}/*子内容排列方向为纵向,无间隔模式*/.flexDirectionColumn{flex-direction: column;justify-content: fle...
让一个定位的盒子水平垂直居中
Jack_13201的博客
08-28 940
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
img 宽度占满父元素宽度，高度等于宽度
最新发布
07-12
/* 子元素宽度占满父元素的宽度 */ aspect-ratio: 1/1; /* 设置子元素的高度与宽度的比例为1:1 */ } ``` 通过将父元素的宽度设置为所需的宽度，子元素将自动继承父元素的宽度。然后，使用`aspect-ratio`...
CSS设置HTML元素的高度与宽度的各种情况总结
09-27
对于处于文档流中的元素，无论父元素宽度如何，子元素都会继承其父元素的宽度。如果元素脱离了文档流，例如使用`float:left`或`position:absolute`、`position:fixed`，其宽度将根据其内容自动调整。这是因为脱离...
使用better-scroll进行横向滚动,子元素自动撑开父元素宽度
AqFr的博客
12-31 2184
工作中用到,记录一下 有时候需要列表展示的数据从后台请求回来,横向滚动的父级元素宽度无法确定,需要子元素自动撑开父元素宽度 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;使用better-scroll进行横向滚动,子元素自动撑开
父Div的高度随子DIV的高度自适应
yushuir的专栏
11-24 339
1、如果父DIV和子DIV都没有定义高度，而且没有使用浮动，即float，那嘛不会出现问题。 2、当你在子DIV里使用float之后，你会发现父DIV不再随子DIV的高度自适应。 这时我们需要做的就是：在使用float的DIV之后再加一个空的DIV，然后在这个DIV上清除float。 &lt;styletypestyletype="text/css"&gt;      #aa{border...
拓展2-父盒子内,实现子盒子水平、垂直居中
GBL_csdn的博客
05-18 326
子元素 margin: 0 auto;=== 实现水平居中子元素 margin-top: calc((父元素的高度 - 子元素的高度) / 2);=== 实现垂直居中但是 会出现外边距的传递问题=== 父元素 /* border: 1px solid black;*/ 或 overflow: hidden;
CSS中父容器跟随子容器的高度自适应
lance_lot1的专栏
12-27 3230
在父容器中添加： zoom:0; overflow:auto;
让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
css中height的继承
weixin_30481087的博客
09-06 723
父元素定高，子元素height:100% 父元素高度继承 ，子元素height:100% 父元素不设置height 子元素1继承 子元素2定高，子元素1并没有继承到父元素的高度 总结:只有当父元素设置高度后子元素才能通过继承来获得高度 其次min-height只能继承min-height，height只能继承height 转载于:https://www.cnblog...
父div随着子div的高度改变而改变
u013363256的博客
03-31 8598
父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设置
【css】div父元素根据子元素高度自适应高度
weixin_30654419的博客
04-24 943
两种情况(无特殊说明子元素都是指代父元素的第一级子元素) 第一种:若子元素没有带有float元素的元素,对于高度是自适应的没有问题. 第二种:若子元素全是带有float属性的元素,这时候我们会发现父元素塌陷,高度为０,因为float浮动元素脱离了正常的文档流,父元素相当于没有了这两个儿子！ 解决这个问题的根源就是清除浮动： 1 , 给父节点增...
CSS 父级元素高度为0(父元素坍塌) 解决方案
子燕若水的博客
09-04 5679
CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。主要有两个原因： ）子元素使用绝对定位 ）子元素浮动 1）子元素使用绝对定位，父元素没设置宽高 此时子元素已从正常文档流中移除，并且不会在页面布局中为该元素创建空间。所以父元素依靠子元素撑起其宽高时会为0； 解决方案：子元素的绝对定位改为相对定位 改为相对之后页面布局时会为子元素创建相应的空间，此时没设置宽高的父元素也会被子元素撑起来了。 ...
flex布局下父子元素的高度
qq_43111808的博客
06-08 7827
父元素为flex布局时： 没有设置高度的子元素与父元素高度一致。 1，如果父元素设置固定高度，则子元素中没有设置高度的元素将继承父元素的高度； 2，如果父元素没有设置高度，其高度由最高的子元素决定。 代码中可以将.father的高度注释一下对比。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值