고정 어린이가있는 오버플로 부모 컨테이너가 가능합니까?

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>