[jquery] 상위 div를 기준으로 ‘위치 : 고정’div의 너비 설정

div (포지션 : 고정)에 너비를 100 % (부모 div와 관련)로 지정하려고합니다. 하지만 몇 가지 문제가 있습니다 …

편집 :
첫 번째 문제는 상속을 사용하여 해결되었지만 여전히 작동하지 않습니다. 문제는 100 % / 상속 너비를 취하는 여러 div를 사용하고 있다는 것입니다. jsfiddle 업데이트에서 두 번째 문제를 찾을 수 있습니다 : http://jsfiddle.net/4bGqF/7/

여우 예

#container {
    width: 800px;
}

#fixed {
    position: fixed;
    width: 100%;
}

그리고 HTML

<div id="container">
    <div id="fixed">Sitename</div>
    <p>
        blaat
    </p>
</div>

또는 시도해 볼 수 있습니다 : http://jsfiddle.net/4bGqF/

문제는 고정 요소가 항상 창 / 문서의 너비를 취하는 것 같습니다 . 누구 든지이 문제를 어떻게 해결하는지 알고 있습니까?

jScrollPane 플러그인을 사용하고 있기 때문에 고정 요소에 고정 요소를 줄 수 없습니다. 스크롤 막대가 있는지 여부에 따라 내용에 따라 다릅니다.

고마워요!

추신 : 두 div의 텍스트가 서로 위에 있습니다. 이것은 단지 예일 뿐이므로 실제로 중요하지 않습니다.

답변

#container {
    width:100%;
    max-width:800px;
}
#contained {
    position:fixed;
    width:inherit;
    max-width:inherit;
}

<div class='container'>
  <header>This is the header</header>
  <section>
    ... long lorem ipsum
  </section>
</div>

body {
  text-align: center;
}

.container {
  text-align: left;
  max-width: 30%;
  margin: 0 auto;
}


header {
  line-height: 2rem;
  outline: 1px solid red;
  background: #fff;
  padding: 1rem;

  position: sticky;
  top: 0;
}

var new_width = $('#container').width();
$('#fixed').width(new_width); 

#container {
    width: 400px;
    border: 1px solid red;
}

#fixed {
    position: fixed;
    width: inherit;
    border: 1px solid green;
}

-webkit-transform: translateZ(0);