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

我有一个父母与自动身高（例如我添加高度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/

来源

2017-12-18 WhatIsHTML

拉伸取决于孩子的内容？ –

当你使用position：fixed时，你从html流中获取元素。这意味着它不管是孩子，兄弟姐妹还是父母都无关紧要。所以，总之，不，这是不可能的。 –

你可以使用jQuery，这是可能的。 – Sonia

我不能想办法单独用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>

来源

2017-12-18 16:34:25 emshore

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

回答

相关问题