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


145

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.


zobacz moją odpowiedź poniżej, która oferuje dodatkowy wgląd w to, inheritjak użycie max-width:inheritz width:inheritzachowuje taki sam stosunek kontener / zawartość, a jednocześnie jest responsywny i łatwy w zarządzaniu
aequalsb

Odpowiedzi:


127

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


4
+1 za fantastycznie proste rozwiązanie, chociaż width: inheritnie jest to pierwsza rzecz, o której bym pomyślał
Bojangles

7
Co to za czary?! +1
Nicu Surdu

7
Masz jakiś pomysł, jak to rozwiązać, jeśli #container width wynosi 50% wewnątrz elementu div o szerokości = 100px (wtedy szerokość kontenera będzie wynosić 50px, a stała szerokość to 50% szerokości przeglądarki)?
Kek

122
Sztuczka z dziedziczeniem szerokości rodzica działa tylko wtedy, gdy rodzic ma ustawioną szerokość w pikselach.
jahu

36
To dość zła odpowiedź ... W zasadzie jest to odpowiednik ustawiania stałych wartości, które wcale nie są przydatne.
Jay

39

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


Świetna odpowiedź! W moim przypadku dodanie a załatwiło sprawę min-width: inherit.
Bruno Monteiro

Działa to dla elementów nadrzędnych o szerokościach zdefiniowanych jako piksele i procent. Moim zdaniem powinna to być poprawna odpowiedź.
Mikel

32

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


12

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ą!


2
zła odpowiedź, jeśli zmienisz rozmiar okna, to się zepsuje.
Jay

3
Powinien naprawdę mieć procedurę obsługi zdarzeń window.onresize.
twistedpixel

To jest sposób na zrobienie tego. Można umieścić w funkcji setWidth (), a następnie wywołać ją w odbiornikach zdarzeń okna „load” i „resize”
woodz

To działało dobrze dla mnie! Napotkałem problem, w którym rodzic miał szerokość: 25%, więc robiąc width: inherit, każde dziecko miało szerokość: 25%.
Troy Riemer

10

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.


1
z wyjątkiem IE6-7 nie obsługują inherit. Nie jestem pewien, czy to mattesr.
Thomas Shields

Wielkie dzięki. Działa, gdy spróbuję tego w przykładzie, ale nie w moim kodzie ... W każdym razie to odpowiedź na pytanie, które tutaj zadałem. Jest prawdopodobnie inny powód, dla którego to nie działa ... Ale mimo to, dzięki!
Dnns

Nie działa z elementami blokowymi bez wyraźnie określonej szerokości
tylik

6

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)


1
@Downvoter - czy możesz wyjaśnić? Nie mam problemu z głosowaniem przeciw, ale lubię wiedzieć dlaczego, więc w przyszłości mogę poprawić swoje odpowiedzi.
Thomas Shields

1
Twoje wyjaśnienie jest w porządku, ale powiedziałeś "nie możesz tak naprawdę dopasować szerokości do swojego rodzica bez JS". Chociaż jest to możliwe w niektórych przypadkach (przy użyciu dziedziczenia).
Dnns

och, oczywiście. Zapomniałem o dziedziczeniu, ponieważ celuję dużo w IE i tylko IE9 + obsługuje to.
Thomas Shields

1
nawet Microsoft chce, aby IE zniknął - biorąc pod uwagę, ile lat ma ten oryginalny post, myślę, że można śmiało powiedzieć, że sprawa IE jest dyskusyjna. jeśli zdecydowanie zalecamy, aby nie obsługiwać IE, JEŚLI nie rozliczasz się specjalnie za takie wsparcie - i na godzinę!
aequalsb

3

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

2
To rozwiązuje problem z szerokością, ale sprawiło, że element podrzędny nie został ustalony względem rzutni.
Vivek Maharajh

1
Przepraszamy za głos przeciw, ponieważ całkowicie mija to cel pozycji: naprawiono.
trusktr

Myślę, że nie czytałeś pytania. Mówi o tym, jak sprawić, by div był „względny” w stosunku do rodzica z „ustaloną” pozycją. TO TAKŻE jest pozycją przeciwstawną. A moja odpowiedź wyraźnie mówi: „hack”. Nie pokonuje celu, kiedy zbliża Cię do rozwiązania.
Senica Gonzalez

1

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>


1

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>


0

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>

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.