2017-12-18 198 views
2

我有一個父母與自動身高(例如我添加高度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/

+0

拉伸取決於孩子的內容? –

+1

當你使用position:fixed時,你從html流中獲取元素。這意味着它不管是孩子,兄弟姐妹還是父母都無關緊要。所以,總之,不,這是不可能的。 –

+0

你可以使用jQuery,這是可能的。 – Sonia

回答

0

我不能想辦法單獨用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>

相關問題