Html 强制具有内联css的容器获取子容器的高度

Html 强制具有内联css的容器获取子容器的高度,html,css,Html,Css,这是我的html: <div class="content"> <p></p> <p></p> <p></p> <p></p> <div style="height: 1px !important;" class="item"> <div style="height: 100px;" class="item-chil

这是我的html:

<div class="content">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <div style="height: 1px !important;" class="item">
        <div style="height: 100px;" class="item-child"></div>
    </div>
    <p></p>
    <p></p>
</div>

在此场景中,
.item
的内联高度设置为1px
.item child
的内联高度设置为100px。是否有一种方法可以基本上否决
.item
内联样式,并使该div与
.item子项的高度相同

这些值是以编程方式应用的,因此我不能只编辑HTML。此外,
.item子项
div可以有多种不同的高度


最后,我更喜欢css解决方案,而不是js,但还没有能够提出css来解决这个问题

我的意思是,它正在做你所期望的盒子模型。我想不出任何其他方法,除了按语法改变父级的样式css,因为css对反向/先前元素没有多大作用,因为DOM是自上而下级联的。然而,一个简单的poc

changeParentHeight=(父类,子类)=>{
const parent=document.querySelector('.'+parentClass),
child=document.querySelector('.'+childClass);
parent.style.height=child.style.height;
}
div div{
边框:红色2px虚线;
}
div div div div{
边框:绿色2px虚线;
}




更改高度
有一种更简单的方法,它不需要javascript

.content div[style] {
   height: 100px !important;
}

这些值是静态的,以便您提前知道目标是什么还是动态的?

一个想法是使用

.item{
边框:1px纯红;/*您将看不到边框,因为元素已删除*/
显示:内容;
}
.项目子项{
边框:1px纯绿色;
}

此处文本

此处文本

和文本在这里

这里还有文本


您可能想测试一下,Specification selector hack无法使用该selector ref,甚至可以说它确实使用了它。它为不期望的结果留下了很大的空间,因为听起来他可能在现实世界的示例中对各种元素使用了很多编程内联样式。我很欣赏这种坦率,但是将
溢出:hidden
添加到
.item
类div中。请注意,这并不能修复任何问题,您只看到“非常基本”的修复出现可见溢出,而信心是幻觉。对不起,我们都去过,所以不用担心;)很好,我不容易生气。我在这方面已经有很长一段时间了,如果我接受建设性的批评不好,那我的工作就错了。你说得对!哦哦,泰玛尼又一次从绳子上下来了!唯一的问题是IE/Edge/Safari@ChrisW. 谁关心IE和Edge;)它应该在Safari上有用,但它有四轮马车。获得更好的支持只是时间问题。顺便说一句,我没有看到任何其他CSS唯一的解决方案(尝试了min height,但它不起作用)哈哈“谁关心IE和Edge”--当这一天降临到所有企业软件开发人员身上时,天堂将开放,免费啤酒将持续数天…虽然公平地说,新的Edge/Chromium转换似乎进行得非常顺利,现在,如果我们能说服Satya埋葬IE,生活就会简单得多:DEdge处理大多数事情都相当好。仍然不完美,但我们离IE6还有很长的路要走;)