고정 div를 부모 컨테이너의 100 % 너비로 설정

패딩이있는 래퍼가 있고 너비가 40 % 인 부동 상대 div가 있습니다.

부동 상대 div 내부에는 부모와 동일한 크기를 원하는 고정 div가 있습니다. 고정 div가 문서의 흐름에서 제거되어 래퍼의 패딩을 무시한다는 것을 이해합니다.

HTML

<div id="wrapper">
  <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
  </div>
</div>

CSS

body { 
  height: 20000px 
}  
#wrapper {
  padding: 10%;
}  
#wrap { 
  float: left;
  position: relative;
  width: 40%; 
  background: #ccc; 
} 
#fixed { 
  position: fixed;
  width: inherit;
  padding: 0px;
  height: 10px;
  background-color: #333;
}

다음은 필수 바이올린입니다. http://jsfiddle.net/C93mk/489/

누구든지 이것을 달성하는 방법을 알고 있습니까?

나는 내가 성취하려는 것에 대해 더 자세히 보여주기 위해 바이올린을 수정했습니다. 혼란을 드려 죄송합니다 : http://jsfiddle.net/EVYRE/4/

.wrapper에 패딩 대신 .wrap 컨테이너에 여백을 사용할 수 있습니다.

body{ height:20000px }
#wrapper { padding: 0%; }
#wrap{ 
    float: left;
    position: relative;
    margin: 10%;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px; 
    height:10px;
    background-color:#333;    
}

jsfiddle

이건 어때 ?

$( document ).ready(function() {
    $('#fixed').width($('#wrap').width());
});

jquery를 사용하면 모든 종류의 너비를 설정할 수 있습니다. :)

편집 : 주석에서 꿈에 의해 언급 했듯이이 효과를 위해 JQuery를 사용하는 것은 무의미하고 심지어 생산적입니다. 이 예제는 페이지의 다른 항목에 JQuery를 사용하는 사람들을 위해 작성했으며이 부분에서도 사용을 고려합니다. 제 답변으로 불편을 드려 죄송합니다.

부모에 변환을 추가하고 (아무것도 할 필요가 없으며, 변환이 0 일 수 있음) 고정 자식의 너비를 100 %로 설정합니다.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 40%; 
    background:#ccc; 
    transform: translate(0, 0);
}
#fixed{ 
    position:fixed;
    width:100%;
    padding:0px;
    height:10px;
    background-color:#333;
}

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

절대 위치를 사용하여 바닥 글을 상위 div의베이스에 고정 할 수 있습니다. 또한 랩에 10px padding-bottom을 추가했습니다 (바닥 글 높이와 일치). 절대 위치는 이미 위치 상대 속성을 부여했기 때문에 흐름 외부가 아니라 상위 div에 상대적입니다.

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    padding-bottom: 10px;
    position: relative;
    width: 40%; 
    background:#ccc; 
}
#fixed{ 
    position:absolute;
    width:100%;
    left: 0;
    bottom: 0;
    padding:0px;
    height:10px;
    background-color:#333;

}

http://jsfiddle.net/C93mk/497/

컨테이너는 부모 요소 너비의 40 %입니다.

하지만 position : fixed를 사용하면 너비는 뷰포트 (문서) 너비를 기준으로합니다.

생각해 보면 부모 요소가 10 % 패딩 (왼쪽 및 오른쪽)을 가지고 있다는 것을 깨달았습니다. 즉, 요소가 전체 페이지 너비의 80 %를 차지한다는 것을 의미합니다. 따라서 고정 요소는 전체 너비의 80 %를 기준으로 40 %를 가져야합니다.

따라서 #fixed 클래스를

#fixed{ 
    position:fixed;
    width: calc(80% * 0.4);
    height:10px;
    background-color:#333;
}

sass, postcss 또는 다른 css 컴파일러를 사용하는 경우 변수를 사용하여 부모 요소의 패딩 값을 변경할 때 레이아웃이 깨지지 않도록 할 수 있습니다.

여기에 업데이트 된 바이올린이 있습니다 http://jsfiddle.net/C93mk/2343/

나는 그것이 도움이되기를 바랍니다.

마지막 jsfiddle 위에 한 가지를 놓쳤습니다.

#sidebar_wrap {
  width:40%;
  height:200px;
  background:green;
  float:right;
}
#sidebar {
  width:inherit;
  margin-top:10px;
  background-color:limegreen;
  position:fixed;
  max-width: 240px; /*This is you missed*/
}

그러나 이것이 당신의 문제를 어떻게 해결할 것입니까? 간단합니다. 먼저 예상보다 큰 이유를 설명하겠습니다.

고정 요소 #sidebar는 다른 모든 고정 요소와 마찬가지로 창 너비 크기를 기본으로 사용하여 다른 모든 고정 요소와 마찬가지로이 요소에서 정의 width:inherit되고 #sidebar_wrap너비 값으로 40 %를 가지면을 계산 window.width * 40%합니다. .container너비, #sidebar보다 클 것입니다#sidebar_wrap .

이 방법은 #sidebar_wrap보다 큰 것을 방지하기 위해 에서 최대 너비를 설정해야합니다 #sidebar_wrap.

작동하는 코드를 보여주는 jsfiddle 을 확인하고 이것이 어떻게 작동하는지 더 잘 설명하십시오.

퍼센트 대신 px 제거 Padding: 10%;또는 사용 위한.wrap

예를 참조하십시오 : http://jsfiddle.net/C93mk/493/

HTML :

<div id="wrapper">
    <div id="wrap">
    Some relative item placed item
    <div id="fixed"></div>
    </div>
</div>

CSS :

body{ height:20000px }
#wrapper {padding:10%;}
#wrap{ 
    float: left;
    position: relative;
    width: 200px; 
    background:#ccc; 
}
#fixed{ 
    position:fixed;
    width:inherit;
    padding:0px;
    height:10px;
    background-color:#333;

}