Stellen Sie die Breite eines Divs „Position: fest“ relativ zum übergeordneten Div ein

137

Ich versuche, einem Div (Position: fest) die Breite von 100% zu geben (bezogen auf das übergeordnete Div). Aber ich habe einige Probleme ...

BEARBEITEN: Das erste Problem wird durch Erben gelöst, aber es funktioniert immer noch nicht. Ich denke, das Problem ist, dass ich mehrere Divs verwende, die die Breite von 100% / erben annehmen. Das zweite Problem finden Sie im jsfiddle-Update: http://jsfiddle.net/4bGqF/7/

Fox Beispiel

#container {
    width: 800px;
}

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

und das HTML

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

Oder probieren Sie es aus: http://jsfiddle.net/4bGqF/

Das Problem scheint zu sein, dass das feste Element immer die Breite des Fensters / Dokuments annimmt . Weiß jemand wie das das behebt?

Ich kann meinem festen Element kein festes Element geben, da ich das jScrollPane-Plugin verwende. Es hängt vom Inhalt ab, ob es eine Bildlaufleiste gibt oder nicht.

Vielen Dank!

PS: Der Text der 2 Divs liegt übereinander. Dies ist nur ein Beispiel, damit es nicht wirklich wichtig ist.

Dnns
quelle
Siehe meine Antwort unten, die einige zusätzliche Einblicke in inheritund wie die Verwendung max-width:inheritmit width:inheritdas Verhältnis Container /
Containat

Antworten:

119

Ich bin mir nicht sicher, was das zweite Problem ist (basierend auf Ihrer Bearbeitung), aber wenn Sie es width:inheritauf alle inneren Divs anwenden , funktioniert es: http://jsfiddle.net/4bGqF/9/

Vielleicht möchten Sie eine Javascript-Lösung für Browser suchen, die Sie unterstützen müssen und die nicht unterstützen width:inherit

Jeroen
quelle
4
+1 für eine fantastisch einfache Lösung, obwohl width: inheritnicht das erste, woran ich gedacht hätte
Bojangles
7
Was ist das für eine Zauberei?! +1
Nicu Surdu
7
Gibt es eine Idee, wie dies gelöst werden kann, wenn #container width 50% innerhalb eines div mit width = 100px beträgt (dann würde die Containerbreite 50px und die feste Breite 50% der Browserbreite betragen)?
Kek
113
Der Trick beim Erben der Breite des Elternteils funktioniert nur, wenn das Elternteil eine festgelegte Breite in px hat.
Jahu
33
Dies ist eine ziemlich schlechte Antwort ... Es entspricht im Grunde dem Festlegen konstanter Werte, was überhaupt nicht sehr nützlich ist.
Jay
33

Wie viele Leute kommentiert haben, setzt Responsive Design die Breite sehr oft um%

width:inheriterbt die CSS-Breite NICHT die berechnete Breite - was bedeutet, dass der untergeordnete Container erbtwidth:100%

Aber ich denke, fast genauso oft reagieren auch Design-Sets max-width:

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

Dies funktionierte sehr zufriedenstellend, um mein Problem zu lösen, dass ein klebriges Menü immer dann auf die ursprüngliche übergeordnete Breite beschränkt wird, wenn es "hängen bleibt".

Sowohl das übergeordnete als auch width:100%das untergeordnete Element halten sich an das, wenn das Ansichtsfenster kleiner als die maximale Breite ist. Ebenso halten sich beide an die, max-width:800pxwenn das Ansichtsfenster breiter ist.

Es funktioniert mit meinem bereits ansprechenden Thema so, dass ich den übergeordneten Container ändern kann, ohne auch das feste untergeordnete Element ändern zu müssen - elegant und flexibel

ps: Ich persönlich denke, es spielt keine Rolle, dass IE6 / 7 nicht verwendet wird inherit

aequalsb
quelle
Gute Antwort! In meinem Fall hat das Hinzufügen von a min-width: inheritden Trick getan.
Bruno Monteiro
Dies funktioniert für übergeordnete Elemente mit Breiten, die als px und Prozentsatz definiert sind. Sollte aus meiner Sicht die richtige Antwort sein.
Mikel
24

feste Position ist ein bisschen schwierig (in der Tat unmöglich), aber Position: klebrig macht den Trick schön:

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

Siehe das Codepen-Beispiel

Multicam
quelle
11

Sie können es auch mit jQuery lösen:

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

Das war sehr hilfreich für mich, weil mein Layout ansprechbar war und die inheritLösung bei mir nicht funktionierte!

Hakan Fıstık
quelle
1
schlechte Antwort, wenn Sie die Größe des Fensters ändern, bricht dies.
Jay
2
Sollte wirklich einen window.onresize-Ereignishandler haben.
Twistedpixel
Dies ist der Weg zu tun. Könnte in eine Funktion setWidth () eingeschlossen werden, dann rufen Sie sie in den Listenern für "Ereignisereignisse" laden "und" Größe ändern "auf
woodz
Das hat bei mir gut funktioniert! Ich bin auf ein Problem gestoßen, bei dem das übergeordnete Element eine Breite von 25% hatte, und bei der Breite: erben wurde jedes untergeordnete Element zu einer Breite von 25%.
Troy Riemer
10

Verwenden Sie dieses CSS:

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

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

Das # fixed-Element erbt die übergeordnete Breite, also 100% davon.

Banrobert
quelle
1
außer IE6-7 nicht unterstützen inherit. Ich bin mir nicht sicher, ob das mattesr.
Thomas Shields
Vielen Dank. Es funktioniert, wenn ich es im Beispiel versuche, aber nicht in meinem Code ... Wie auch immer, es ist eine Antwort auf die Frage, die ich hier gestellt habe. Es gibt wahrscheinlich noch einen anderen Grund, warum es nicht funktioniert ... Aber trotzdem, danke!
Dnns
6

Eine feste Positionierung soll alles in Bezug auf das Ansichtsfenster definieren, also position:fixedwird das immer so sein . Versuchen Sie stattdessen, position:relativedas untergeordnete div zu verwenden. (Mir ist klar, dass Sie die feste Positionierung möglicherweise aus anderen Gründen benötigen, aber wenn ja, können Sie die Breite nicht wirklich an die übergeordnete Breite ohne JS anpassen. inherit)

Thomas Shields
quelle
1
@ Downvoter - kannst du das bitte erklären? Ich habe kein Problem mit einer Ablehnung, aber ich möchte wissen, warum, damit ich meine Antworten in Zukunft verbessern kann.
Thomas Shields
1
Ihre Erklärung ist in Ordnung, aber Sie sagten: "Ohne JS können Sie die Breite nicht wirklich an die übergeordnete Breite anpassen." Obwohl es in einigen Fällen möglich ist (durch Verwendung von erben).
Dnns
Oh natürlich. Ich hatte vergessen zu erben, da ich viel auf IE ziele und nur IE9 + es unterstützt.
Thomas Shields
1
Sogar Microsoft möchte, dass der IE verschwindet. Wenn man bedenkt, wie alt dieser ursprüngliche Beitrag ist, kann man mit Sicherheit sagen, dass das IE-Problem umstritten ist. Wenn Sie dringend empfehlen, IE nicht zu unterstützen, es sei denn, Sie stellen diese Unterstützung speziell in Rechnung - und zwar stundenweise!
Aequalsb
3

Hier ist ein kleiner Hack, auf den wir gestoßen sind, als wir einige Probleme beim Neuzeichnen in einer großen App behoben haben.

Verwenden -webkit-transform: translateZ(0); auf dem Elternteil. Dies gilt natürlich speziell für Chrome.

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

-webkit-transform: translateZ(0);
Senica Gonzalez
quelle
2
Dies behebt das Breitenproblem, macht das untergeordnete Element jedoch relativ zum Ansichtsfenster nicht mehr fixiert.
Vivek Maharajh
Entschuldigen Sie die Ablehnung, da dies den Zweck der Position völlig zunichte macht: behoben.
Trusktr
Ich glaube nicht, dass Sie die Frage gelesen haben. Es heißt, wie macht man ein Div "relativ" zu einem Elternteil mit "fester" Position. DAS IST AUCH Anti-Fix-Position. Und meine Antwort sagt eindeutig "Hack". Es macht den Zweck nicht zunichte, wenn es Sie näher an Ihre Lösung bringt.
Senica Gonzalez
1

Hierfür gibt es eine einfache Lösung.

Ich habe eine feste Position für übergeordnetes div und eine maximale Breite für den Inhalt verwendet.

Sie müssen nicht zu viel über andere Container nachdenken, da die Position nur relativ zum Browserfenster festgelegt ist.

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

Sab Devadasan
quelle
1

Diese Lösung erfüllt die folgenden Kriterien

  1. Die prozentuale Breite ist für übergeordnete Elemente zulässig
  2. Funktioniert nach der Größenänderung des Fensters
  3. Auf Inhalte unter dem Header kann niemals zugegriffen werden

Soweit mir bekannt ist, können diese Kriterien (leider) ohne Javascript nicht erfüllt werden.

Diese Lösung verwendet jQuery, kann aber auch problemlos in Vanilla JS konvertiert werden:

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>

Skeets
quelle
0

Sie müssen den gleichen Stil für das feste Element und das übergeordnete Element angeben. Eines dieser Beispiele wird mit maximalen Breiten und das andere Beispiel mit Polstern erstellt.

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

Khachik
quelle