关于父级元素给定max-height，子级元素高度设置百分比失效的解决方案

最新推荐文章于 2023-12-14 15:29:58 发布

会一点前端的小姐姐

最新推荐文章于 2023-12-14 15:29:58 发布

阅读量2.6k

点赞数

分类专栏：我的前端踩坑日记文章标签： css html 前端 javascript

本文链接：https://blog.csdn.net/yanyan13840132/article/details/128252051

版权

我的前端踩坑日记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一般情况下，我们需要让父级元素自适应子级元素的内容，而且子级元素在达到一定高度以后需要滚动，有两种情况。

1.父级元素有给定高度

父级元素有给定高度的情况下，子级元素只需要给最大高度，设置滚动即可

</div>

.father {

height: 100px;

.child {

max-height:100%;

overflow:auto

}

2.父级元素没有给定高度，只有最大给定高度

父级元素有给定高度的情况下，只有最大给定高度，子级元素高度设置百分比无效，这时使用flex实现子级元素设置百分比高度

</div>

.father {

display: flex;

.child {

max-height:100%;

overflow:auto

}

3.实现效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

会一点前端的小姐姐

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

前端面试题---html/css

weixin_44501366的博客

10-07

1259

!DOCTYPE 标签：head：body:base:可以用来统一设置当前页面上的超链接的跳转方式< base >标签为页面上的所有链接规定默认地址或默认目标使用了 < base > 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备通常情况下，浏览器会从当前文档的URL中提取相应的元素来填写相对URL中的空白。使用< base >标签可以改变这一点。浏览器随后将不再使用当前文档的URL，而使用指定的基本URL来解析所有的相对URL。这其中包括 < a >、< img >、< li

MPAndroidChart常见设置属性（一）——应用层

最新发布

weixin_35843253的博客

12-14

3850

2. 父元素的高度为百分比值：如果父元素的高度也是以百分比值来设置的，那么它的实际高度将取决于其祖先元素的高度。的确可以设置元素的高度为其父元素的百分比高度。但要注意的是，为了实现这个效果，父元素的高度必须已经通过某种方式设置为一个确定的值，而不是默认的。4. 父元素使用了浮动或绝对定位：如果父元素使用了浮动或绝对定位等布局属性，那么它的高度将会塌缩为0，此时子元素的。1. 没有设置父元素的高度：如果父元素的高度未设置或设置为。3. 父元素的高度为可视窗口高度：如果父元素的高度是。也无法确定正确的高度。

关于父元素设置min-height，子元素设置 height 100% 不生效的问题

左不言的博客

10-15

1万+

<div class="container"> <div class="child"></div> </div> <style> .container { min-height: 100px; border: 1px solid; } .child { height: 50%; background: red; } </style&gt.

为啥你的height:100%不起作用？让高度百分比，height:100% 生效的3种方法.

Harley567

02-02

3030

让高度百分比，height:100% 生效的3种方法

height：100%失效解决办法

weixin_34414196的博客

03-23

686

首先我们要知道height:100%能生效有两种情况。第一种是父级有显性高度，即写了具体值。当然从 html 一直往下都赋予height:100%也是属于这种情况。（html=>body=>...=>父级=>目标元素）。当然设置 max-height 与 min-height 对height:100%的多数情况是没用的，它们只是设置边界而不是设置具体值。第...

前端基础知识总结---CSS篇

Web前端开发工程师

09-09

2435

前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集

weixin_46615135的博客

03-23

1565

前端学习笔记01---HTML5、CSS3、移动端前端基础学习知识点合集

m0_55613022的博客

02-24

3229

HTML和Css部分 1、对BFC规范（块级格式化上下文）的理解 BFC 块级格式化上下文一块独立的区域，有自己的规则，bfc中的元素与外界的元素互不影响 BFC是一块用来独立的布局环境，保护其中内部元素不受外部影响，也不影响外部。怎么触发BFC 1. float的值left或right 2. overflow的值不为visible（默认） 3. display的值为inline-block、table-cell、table-caption 4. position的值为absolute（绝对定位）或f

flex布局css的宽高不生效

weixin_64103049的博客

10-09

441

flex布局css的宽高不生效

element table组件根据屏幕大小动态设置max-height属性设置表格最大高度，但设置百分比或者响应式不生效的问题

二三的博客

12-06

1万+

element的table表格组件有一个max-height属性，可以设置table的最大高度，但是当我设置这个属性的值为百分比或者响应式的时候，却没有生效，如下所示。 max-height:calc(100vh - 40px) //或者 max-height:calc(100% - 40px) 这是因为element-ui的文档，max-height的合法的值为数字或者单位为 px 的高度。无法识别响应式的css。解决方法有以下几种：首先列举出代码：首先设置table组件的ref属性，以及设.

【CSS篇】父元素设置min-height，子元素height 100%失效问题

章魚尐芄子的博客

07-08

4948

当父元素设置了min-height，子元素设置height为100%，此时子元素的height 100%失效

子元素设置高度百分比无效+如何让浮动子元素高度等于父元素高度

哼

06-01

540

一开始我直接按照设计图用了浮动布局，左栏设置向左浮动，右栏用margin-left:左栏宽度+间距撑开两个盒子间的距离，两栏设置了宽高（其实不应该设置高度的，因为高度不定，后面会说。在外部盒子等待内部元素计算出高度时并不知道自己的高度，内部盒子高度相对外部盒子设置高度时也未知外部高度，所以按照自己的内容的情况渲染了，最终的效果就是内部盒子高度与外部无关。min-height表示盒子的最小高度，并不表示盒子的最终高度，站在外部盒子的角度理解是外部最终高度是由盒子的内部元素的高度与当前盒子的最小高度共同决定。

[css] 父元素flex:1,子元素设置height:100%无效

qq_14993591的博客

03-17

4689

父级的高度是通过flex为1来设置的，然后子级想保持和父级一样的高度。由于这里的父元素是缺省的，所以设置了高度百分百是无效的。这个时候inner就会保持和content一样的高度。可以设置父级高度为0.

el-table max-height 无法设置百分比高度导致滚动条出不来解决

qq_45498438的博客

06-03

1818

var div = document.getElementById("给自己组件设置个不会冲突的Id");el官方对这个属性的介绍是，绝对值。无法使用百分比值，对做小组件不是很友好。2.js获取元素高度，动态设置表格高度tableHeight。1.给自己组件设置个不会冲突的Id。

为什么设置height:100%有时没有生效的原因

jian091309的博客

04-23

4008

为什么设置height:100%有时没有生效的原因

关于图片自适应方式失效以及解决方案

big_gg的博客

07-30

1684

传统的图片自适应解决方案，样式分为两个部分，一个部分是包裹图片区域的样式，一个是图片的样式。包裹图片一般采用单元格的td，如下 (width 和 height可自定义大小，vertical-align text-align使内容居中) .div1 { width:300px; height:300px; border:1px solid black; text-align: center; display: table-cel

基于单链表设计一个完整的二叉树ADT，将第一个元素的索引赋值为0。给定索引i，请执行三个操作以分别获取其父级、左子级和右子级

08-06

### 回答1：对于基于单链表的二叉树ADT，我们可以使用一个链表来存储所有节点，其中第一个元素的索引为0。这样，我们就可以通过给定的索引i来访问第i个节点。要获取给定索引i的父级节点，我们可以使用以下代码： ``` def get_parent(i): if i == 0: # 根节点没有父节点 return None return (i - 1) // 2 # 返回父节点的索引 ``` 要获取给定索引i的左子节点，我们可以使用以下代码： ``` def get_left_child(i): return 2 * i + 1 # 返回左子节点的索引 ``` 要获取给定索引i的右子节点，我们可以使用以下代码： ``` def get_right_child(i): return 2 * i + 2 # 返回右子节点的索引 ``` 希望这些代码能帮到你！ ### 回答2：二叉树(Abstract Data Type, ADT)是一种基于链表的数据结构，每个节点最多有两个子节点。基于单链表的二叉树ADT的设计包括定义节点结构以及实现操作方法。节点结构包括数据域和指针域，数据域存储节点的值，而指针域分别指向节点的父节点、左子节点和右子节点。定义一个二叉树ADT的节点结构如下： ``` class BinaryTreeNode: def __init__(self, value): self.data = value self.parent = None self.left_child = None self.right_child = None ``` 三个操作分别是获取给定索引i的父级、左子级和右子级。根据索引i可以通过遍历链表找到对应的节点，操作方法如下： 1. 获取父级节点：根据节点的指针域，我们可以通过访问给定节点的`parent`指针域获取其父节点。代码如下： ``` def get_parent(node, index): if index == 0 or node is None: return None curr = node while curr is not None: if index == curr.left_child: return curr if index == curr.right_child: return curr curr = curr.parent return None ``` 2. 获取左子级节点：根据节点的指针域，我们可以通过访问给定节点的`left_child`指针域获取其左子节点。代码如下： ``` def get_left_child(node, index): if node is None: return None curr = node while curr is not None: if index == curr.left_child: return curr.left_child curr = curr.parent return None ``` 3. 获取右子级节点：根据节点的指针域，我们可以通过访问给定节点的`right_child`指针域获取其右子节点。代码如下： ``` def get_right_child(node, index): if node is None: return None curr = node while curr is not None: if index == curr.right_child: return curr.right_child curr = curr.parent return None ``` 以上是基于单链表设计的二叉树ADT的实现。可以根据实际需求对节点结构和操作方法进行进一步扩展和改进。 ### 回答3：基于单链表设计一个完整的二叉树ADT，我们可以使用以下方式来实现。 1. 创建一个链表节点类，包含一个数据成员和两个指针成员（分别指向左子节点和右子节点）。 2. 创建一个二叉树类（BinaryTree），包含一个根节点和一系列操作方法。 3. 在构建二叉树时，将第一个元素的索引赋值为0，作为根节点的索引。 4. 实现获取父节点的操作 getParent(i)： - 首先判断索引i是否为根节点的索引（即为0），如果是，则返回空。 - 遍历整个链表，找到索引为i的节点的父节点，可以通过遍历链表的方式，逐个判断每个节点的左右子节点的索引是否为i，如果是，则该节点即为索引i的父节点。 5. 实现获取左子节点的操作 getLeftChild(i)： - 遍历整个链表，找到索引为i的节点的左子节点，可以通过遍历链表的方式，逐个判断每个节点的索引是否为i的左子节点。 6. 实现获取右子节点的操作 getRightChild(i)： - 遍历整个链表，找到索引为i的节点的右子节点，可以通过遍历链表的方式，逐个判断每个节点的索引是否为i的右子节点。通过以上的设计和操作，我们可以在基于单链表的二叉树ADT中，根据给定索引i执行三个操作，分别获取其父节点、左子节点和右子节点。