是否有可能使用固定小孩的父容器溢出？

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个父母与自动身高（例如我添加高度300px测试pupose）和子元素的位置：固定。即使孩子有固定位置，只要孩子可以伸展父母元素吗？是否有可能使用固定小孩的父容器溢出？

<div class="parent"> 
    <div class="fixed"></div> 
</div> 
.fixed { 
    position: fixed; 
    height: 750px; 
    width: 100%; 
    background: red; 
    opacity: 0.5; 
    margin: auto; 
} 
.parent { 
    height: 300px; 
    background: yellow; 
}

例这里 https://jsfiddle.net/hz0wgx1w/

回答：

我不能想办法单独用CSS来做到这一点，但这里使用jQuery来更新CSS实例以便父母的高度和宽度匹配孩子的：

https://jsfiddle.net/hz0wgx1w/13/

请记住，与孩子固定的，它不会与母公司同步滚动，所以这只能设置其初始大小相匹配。它不能确保他们的位置在滚动时会继续匹配。

这也没有考虑到响应性，所以在页面加载后对子页面宽度的任何更改都不会导致父页面更新，但根据您的目标，也可以使用jQuery轻松完成。

我保存了您的HTML，但如果您打算在其他元素上重用这些类，则使用不同的ID而不是类会更安全。

$(".parent").css("height", $(".fixed").css("height"));  
$(".parent").css("width", $(".fixed").css("width"));

.fixed {  
    position: fixed;  
    height: 750px;  
    width: 100%;  
    background: red;  
    opacity: 0.5;  
    margin: auto;  
}  
.parent {  
    height: 300px;  
    background: yellow;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
<div class="parent">  
    <div class="fixed"></div>  
</div>

以上是 是否有可能使用固定小孩的父容器溢出？ 的全部内容， 来源链接： utcz.com/qa/262473.html

回到顶部