상위 div를 기준으로 '위치 : 고정'div의 너비 설정

상위 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

---

이 CSS를 사용하십시오 :

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

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

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

---

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

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

This was so helpful to me because my layout was responsive, and the inherit solution wasn't working with me!

---

Fixed positioning is supposed to define everything in relation to the viewport, so position:fixed is always going to do that. Try using position:relative on the child div instead. (I realize you might need the fixed positioning for other reasons, but if so - you can't really make the width match it's parent with out JS without inherit)

---

Here is a little hack that we ran across while fixing some redraw issues on a large app.

Use -webkit-transform: translateZ(0); on the parent. Of course this is specific to Chrome.

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

-webkit-transform: translateZ(0);

---

fixed position is a bit tricky (indeed impossible), but position: sticky is doing the trick beautifully:

<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;
}

see the codepen sample

---

Here is the trick I've used.

E.g. I had this HTML:

<div class="head">
    <div id="fx">123</div>
</div>

and to make #fx fixed inside .head, so the workaround is to add an additional div as a container for #fx with position:absolute like this:

<div class="head">
    <div class="area_for_fix">
        <div id="fx">123</div>
    </div>
</div>

Here is the CSS:

.head {
    min-width:960px;
    width:960px;
    nax-width:1400px;
    height:300px;
    border: 1px solid #000;
    position:relative;
    margin:0 auto;
    margin-top:50px;
    padding:20px;
    text-align:right;
    height:1500px;
}

.area_for_fix {
    position:absolute;
    right:0;
    width:150px;
    height:200px;
    background-color:red;
}

#fx {
    width:150px;
    height:75px;
    background-color:#ccc;
    position:fixed;
}

Important: to not set top and left for #fx, set these attributes on .area_for_fix.

---

There is an easy solution for this.

I have used a fixed position for parent div and a max-width for the contents.

You don't need to think about too much about other containers because fixed position only relative to the browser window.

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

---

This solution meets the following criteria

1. Percentage width is allowed on parent
2. Works after window resize
3. Content underneath header is never inaccessible

As far as I'm aware, this criteria cannot be met without Javascript (unfortunately).

This solution uses jQuery, but could also be easily converted to vanilla 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>

참고URL : https://stackoverflow.com/questions/5873565/set-width-of-a-position-fixed-div-relative-to-parent-div