상위 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 플러그인을 사용하고 있기 때문에 고정 요소를 지정할 수 없습니다.스크롤바가 있는지 없는지는 내용에 따라 다릅니다.

정말 고마워.

PS: 두 디브의 텍스트는 서로 겹쳐져 있습니다.이것은 단지 예시일 뿐이므로 별로 중요하지 않습니다.

두 번째 문제가 무엇인지는 잘 모르겠습니다(편집 내용에 따라). 하지만 신청하시면.width:inherit모든 내부 디브에게, 그것은 작동합니다: http://jsfiddle.net/4bGqF/9/ . http://jsfiddle.net/4bGqF/9/

지원해야 하는 브라우저와 지원하지 않는 브라우저를 위한 Javascript 솔루션을 알아보고 싶을 수 있습니다.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;
}

코드펜 샘플 보기

많은 사람들이 언급했듯이 반응형 설계는 폭을 %로 설정하는 경우가 많습니다.

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뷰포트가 더 넓을 때.

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

ps: 저는 개인적으로 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); 

이것은 저에게 매우 도움이 되었습니다. 왜냐하면 저의 레이아웃은 반응이 좋았고,inherit해결책이 저와 함께 작동하지 않았습니다!

하여 모든 에, 와▁fixed,,로있port▁so으,position:fixed항상 그렇게 할 것입니다.사용해 보십시오.position:relative다에에아디브 (도 있다는 것을 , - 가 JS 가 될 수 .)inherit)

jquery가 있는 sticky header의 경우, 나는 여전히 이 css 설정이 작동한 jquery의 학습자입니다.

header.sticky{
    position: fixed;
    border-radius: 0px;
    max-height: 70px;
    z-index: 1000;
    width: 100%;
    max-width: inherit;
}

헤더가 최대 너비가 1024인 래퍼 div 내부에 있습니다.

여기 큰 앱에서 다시 그린 문제를 수정하는 동안 우연히 발견한 작은 해킹이 있습니다.

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

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

-webkit-transform: translateZ(0);

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

저는 parent div에 고정된 위치를 사용했고 내용은 max-width를 사용했습니다.

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

       .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. 헤더 아래의 콘텐츠에 절대 액세스할 수 없음

(안타깝게도) 이 기준은 자바스크립트 없이는 충족될 수 없는 것으로 알고 있습니다.

이 솔루션은 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>

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