Ustaw szerokość elementu div „Position: fixed” względem nadrzędnego elementu div

Próbuję podać element div (pozycja: stała) o szerokości 100% (w odniesieniu do jego nadrzędnego elementu DIV). Ale mam pewne problemy ...

EDYCJA: Pierwszy problem jest rozwiązany przy użyciu dziedziczenia, ale nadal nie działa. Myślę, że problem polega na tym, że używam wielu elementów div, które przyjmują szerokość 100% / inherit. Drugi problem znajdziesz w aktualizacji jsfiddle: http://jsfiddle.net/4bGqF/7/

Przykład lisa

#container {
    width: 800px;
}

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

i html

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

Lub możesz to wypróbować: http://jsfiddle.net/4bGqF/

Wydaje się, że problem polega na tym, że stały element zawsze przyjmuje szerokość okna / dokumentu . Czy ktoś wie, jak to naprawić?

Nie mogę ustawić stałego elementu za pomocą, ponieważ używam wtyczki jScrollPane. Zależy to od zawartości, czy jest pasek przewijania, czy nie.

Wielkie dzięki!

PS: Tekst dwóch elementów div są jeden na drugim. To tylko przykład, więc to nie ma znaczenia.

Nie jestem pewien, na czym polega drugi problem (na podstawie twojej edycji), ale jeśli zastosujesz się width:inheritdo wszystkich wewnętrznych div, to działa: http://jsfiddle.net/4bGqF/9/

Możesz zajrzeć do rozwiązania javascript dla przeglądarek, które musisz obsługiwać, a które nie obsługują width:inherit

Jak wiele osób zauważyło, responsywny projekt bardzo często ustawia szerokość o%

width:inheritodziedziczy szerokość CSS, a NIE obliczoną szerokość - co oznacza, że ​​dziedziczy kontener potomnywidth:100%

Ale myślę, że prawie równie często responsywne zestawy projektowe max-width, dlatego:

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

To działało bardzo satysfakcjonująco, rozwiązując mój problem polegający na tym, że przyklejone menu było ograniczone do oryginalnej szerokości nadrzędnej, gdy „utknęło”

Zarówno rodzic, jak i dziecko będą przestrzegać, width:100%jeśli widoczny obszar jest mniejszy niż maksymalna szerokość. Podobnie obie będą przylegać do, max-width:800pxgdy widoczny obszar jest szerszy.

Działa z moim już responsywnym motywem w taki sposób, że mogę zmienić kontener nadrzędny bez konieczności zmiany stałego elementu podrzędnego - elegancki i elastyczny

ps: Osobiście uważam, że nie ma znaczenia, że ​​IE6 / 7 nie używa inherit

ustalona pozycja jest trochę trudna (a nawet niemożliwa), ale position: sticky pięknie radzi sobie:

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

zobacz próbkę codepen

Możesz również rozwiązać to za pomocą jQuery:

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

To było dla mnie bardzo pomocne, ponieważ mój układ był responsywny, a inheritrozwiązanie nie działało ze mną!

Użyj tego CSS:

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

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

Element #fixed odziedziczy swoją szerokość nadrzędną, więc będzie to 100% tej szerokości.

Stałe pozycjonowanie ma określać wszystko w odniesieniu do widoku, więc position:fixedzawsze będzie to robić. Spróbuj position:relativezamiast tego użyć na dziecku div. (Zdaję sobie sprawę, że możesz potrzebować stałego pozycjonowania z innych powodów, ale jeśli tak - nie możesz tak naprawdę dopasować szerokości do swojego rodzica bez JS bez inherit)

Oto mały hack, z którym natknęliśmy się podczas naprawiania niektórych problemów z przerysowaniem w dużej aplikacji.

Użyj -webkit-transform: translateZ(0);na rodzica. Oczywiście dotyczy to Chrome.

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

-webkit-transform: translateZ(0);

Jest na to proste rozwiązanie.

Użyłem stałej pozycji dla nadrzędnego elementu div i maksymalnej szerokości dla zawartości.

Nie musisz zbytnio myśleć o innych kontenerach, ponieważ ustalona pozycja jest tylko w stosunku do okna przeglądarki.

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

To rozwiązanie spełnia następujące kryteria

1. Procentowa szerokość jest dozwolona w rodzicu
2. Działa po zmianie rozmiaru okna
3. Treść pod nagłówkiem nigdy nie jest niedostępna

O ile mi wiadomo, tych kryteriów nie można spełnić bez Javascript (niestety).

To rozwiązanie wykorzystuje jQuery, ale można je również łatwo przekonwertować na waniliowy 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>

Musisz nadać ten sam styl stałemu elementowi i jego elementowi nadrzędnemu. Jeden z tych przykładów jest tworzony z maksymalnymi szerokościami, aw drugim z wypełnieniami.

* {
  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>