是否有可能使用固定小孩的父容器溢出?
问题描述:
我有一个父母与自动身高(例如我添加高度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;
}
答
我不能想办法单独用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>
拉伸取决于孩子的内容? –
当你使用position:fixed时,你从html流中获取元素。这意味着它不管是孩子,兄弟姐妹还是父母都无关紧要。所以,总之,不,这是不可能的。 –
你可以使用jQuery,这是可能的。 – Sonia