固定子を持つオーバーフロー親コンテナは可能ですか？

Question

私は、自動高さを持つ親を持っています（例では、私はpuposeをテストするために高さ300pxを追加しました）。子どもが一定の位置を占めていても、子どもがいればストレッチ親要素が可能ですか？

<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/

Answer 1

私だけではCSSでこれを行うための方法を考えることはできませんが、ここでCSSを更新するためにjQueryを使用した例があります親の高さと幅が一致子供のように：

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>