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.
quelle
inherit
und wie die Verwendungmax-width:inherit
mitwidth:inherit
das Verhältnis Container /Antworten:
Ich bin mir nicht sicher, was das zweite Problem ist (basierend auf Ihrer Bearbeitung), aber wenn Sie es
width:inherit
auf 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
quelle
width: inherit
nicht das erste, woran ich gedacht hätteWie viele Leute kommentiert haben, setzt Responsive Design die Breite sehr oft um%
width:inherit
erbt 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
: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:800px
wenn 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
quelle
min-width: inherit
den Trick getan.feste Position ist ein bisschen schwierig (in der Tat unmöglich), aber Position: klebrig macht den Trick schön:
Siehe das Codepen-Beispiel
quelle
Sie können es auch mit jQuery lösen:
Das war sehr hilfreich für mich, weil mein Layout ansprechbar war und die
inherit
Lösung bei mir nicht funktionierte!quelle
Verwenden Sie dieses CSS:
Das # fixed-Element erbt die übergeordnete Breite, also 100% davon.
quelle
inherit
. Ich bin mir nicht sicher, ob das mattesr.Eine feste Positionierung soll alles in Bezug auf das Ansichtsfenster definieren, also
position:fixed
wird das immer so sein . Versuchen Sie stattdessen,position:relative
das 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
)quelle
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/
quelle
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.
quelle
Diese Lösung erfüllt die folgenden Kriterien
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:
quelle
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.
quelle