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

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.

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

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

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

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!

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.

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)

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

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>

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>

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>