상위 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의 텍스트가 서로 위에 있습니다. 이것은 단지 예일 뿐이므로 실제로 중요하지 않습니다.

두 번째 문제가 무엇인지 확실하지 않지만 (편집 기준) width:inherit모든 내부 div에 적용 하면 작동합니다 .http : //jsfiddle.net/4bGqF/9/

지원해야하고 지원하지 않는 브라우저에 대한 자바 스크립트 솔루션을 살펴볼 수 있습니다. width:inherit

많은 사람들이 언급했듯이 반응 형 디자인은 종종 너비를 %로 설정합니다.

width:inherit계산 된 너비가 아닌 CSS 너비 를 상속합니다. 즉, 자식 컨테이너가 상속한다는 의미입니다.width:100%

그러나 반응 형 디자인 세트와 마찬가지로 거의 다음과 같이 생각합니다 max-width.

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

이것은 "고착"될 때마다 스티커 메뉴를 원래 부모 너비로 제한하는 문제를 해결하기 위해 매우 만족스럽게 작동했습니다.

width:100%뷰포트가 최대 너비보다 작은 경우 부모와 자식이 모두 준수합니다 . 마찬가지로 max-width:800px뷰포트가 더 넓을 때 둘 다를 준수합니다 .

우아하고 유연한 고정 자식 요소를 변경하지 않고도 부모 컨테이너를 변경할 수있는 방식으로 이미 반응 형 테마와 함께 작동합니다.

추신 : 개인적으로 IE6 / 7이 사용하지 않는 비트는 중요하지 않다고 생각합니다. 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;
}

코드 펜 샘플 참조

jQuery로 해결할 수도 있습니다.

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

레이아웃이 반응이 좋았고 inherit솔루션이 작동하지 않았기 때문에 이것은 나에게 도움이되었습니다 !

이 CSS를 사용하십시오 :

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

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

#fixed 요소는 부모 너비를 상속하므로 100 %가됩니다.

고정 위치는 뷰포트와 관련된 모든 것을 정의해야하므로 position:fixed항상 그렇게 할 것입니다. position:relative대신 자식 div를 사용해보십시오 . (난 당신이 다른 이유에 대한 고정 위치를해야 할 수도 있습니다 실현,하지만 그렇다면 - 당신이 정말로없이 JS에서와 그것의 부모 폭 경기를 할 수 없습니다 inherit)

다음은 큰 앱에서 일부 다시 그리기 문제를 해결하는 동안 우리가 겪은 약간의 해킹입니다.

-webkit-transform: translateZ(0);부모에게 사용하십시오 . 물론 이것은 Chrome에만 해당됩니다.

http://jsfiddle.net/senica/bCQEa/

-webkit-transform: translateZ(0);

이에 대한 쉬운 해결책이 있습니다.

부모 div의 고정 위치와 내용의 최대 너비를 사용했습니다.

고정 된 위치는 브라우저 창에만 상대적이기 때문에 다른 컨테이너에 대해 너무 많이 생각할 필요가 없습니다.

       .fixed{
            width:100%;
            position:fixed;
            height:100px;
            background: red;
        }

        .fixed .content{
            max-width: 500px;
            background:blue;
            margin: 0 auto;
            text-align: center;
            padding: 20px 0;
        }

<div class="fixed">
  <div class="content">
     This is my content
  </div>
</div>

이 솔루션은 다음 기준을 충족합니다

1. 부모에서 백분율 너비가 허용됩니다.
2. 창 크기 조정 후 작동
3. 헤더 아래의 내용은 액세스 할 수 없습니다

내가 아는 한,이 기준은 Javascript 없이는 (불행히도) 충족 될 수 없습니다.

이 솔루션은 jQuery를 사용하지만 바닐라 JS로 쉽게 변환 할 수도 있습니다.

function fixedHeader(){
  $(this).width($("#wrapper").width());
  $("#header-filler").height($("#header-fixed").outerHeight());
}

$(window).resize(function() {
  fixedHeader();
});

fixedHeader();

#header-fixed{
  position: fixed;
  background-color: white;
  top: 0;
}
#header-filler{
  width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
<div id="header-fixed">
  This is a nifty header! works even when resizing the window causing a line break
</div>
<div id="header-filler"></div>

[start fluff]<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>
[end fluff]

</div>

동일한 스타일의 고정 요소와 해당 상위 요소를 제공해야합니다. 이러한 예 중 하나는 최대 너비로 작성되고 다른 예는 패딩으로 작성됩니다.

* {
  box-sizing: border-box
}
body {
  margin: 0;
}
.container {
  max-width: 500px;
  height: 100px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: lightgray;
}
.content {
  max-width: 500px;
  width: 100%;
  position: fixed;
}
h2 {
  border: 1px dotted black;
  padding: 10px;
}
.container-2 {
  height: 100px;
  padding-left: 32px;
  padding-right: 32px;
  margin-top: 10px;
  background-color: lightgray;
}
.content-2 {
  width: 100%;
  position: fixed;
  left: 0;
  padding-left: 32px;
  padding-right: 32px;
}

<div class="container">
  <div class="content">
    <h2>container with max widths</h2>
  </div>
</div>

<div class="container-2">
  <div class="content-2">
    <div>
      <h2>container with paddings</h2>
    </div>
  </div>
</div>