Position fixed element mit prozentualer Breite relativ zum container

Ich weiß, dass position: fixed macht ein element relativ zum viewport, anstatt es offsetParent jedoch habe ich ein Problem wo ich einer Seite ein element, das dauert x Menge von Raum, und dann einige Feste position überschrift-Elemente, die ich aufnehmen will ein Prozentsatz der verbleibenden viewport-Breite.

Sehen fiddle: http://jsfiddle.net/U5DSZ/

Nun konnte ich alle h1 element in einen eigenen container, aber dann verlieren Sie Ihren semantischen Bedeutung, da Sie nicht mehr im Zusammenhang mit Ihrem Inhalt.

Verstehe ich JavaScript könnte dies tun, aber ich bin gegen die Verwendung von JavaScript für die Seite-Struktur.

Gibt es eine Möglichkeit, dies zu tun in einer rein HTML oder CSS Weg? Ich kümmere mich nicht bewegen der h1 element ist, solange Sie halten Ihre Beziehung mit dem Inhalt und der Inhalt bleibt statisch positioniert.

  • Ist es das, was Sie sind versuchen zu tun? jsfiddle.net/audetwebdesign/U5DSZ/1
  • Sehr nah, aber ich brauche den Header zu nehmen, den restlichen Platz nach sidebar.
  • sind Sie wollen nur die Header, um die Verbleibende Breite des Bildschirms, oder Sie brauchen Sie, um nach oben und unten auf der Seite auch? Wenn es nur die Breite, was dann: jsfiddle.net/peteng/U5DSZ/2 (nicht sicher, welchen Wert es geht oben und unten auf der Seite ist)
  • Ok, genau darauf achten, an ihm zu arbeiten... danke für die schnelle Rückmeldung.
  • beide Feste Positionierung und nehmen den übrigen Raum. Es macht mehr Sinn, in seiner realen Kontext ist das nur eine stark vereinfachte demo konnte ich problemlos reproduzieren.
  • Ich glaube nicht, dass was Sie wollen ist möglich mit reinem css. Wenn Sie die Breite, die Sie benötigen, js, um es zu verschieben nach oben und unten. Ansonsten, wenn Sie es festgelegt haben, müssen Sie js zu berechnen, die richtige Breite (bis zu diesem css3 calc Sache kommt)
  • nur so nebenbei, das ist, wie einfach es wäre, es zu tun mit ein wenig js jsfiddle.net/peteng/U5DSZ/4
  • Das ist es, was ich fürchte, aber manchmal, die Sie tun können Magische Dinge mit CSS.
  • In der Tat, aber ich konnte, ohne zu Stottern.
  • Ihr jQuery-gestützte Lösung ist Wert posting. Ich habe eine CSS-option, die ist ziemlich nah, so wäre es gut, haben beide Ansätze.
  • Ich habe am Ende gehen nach unten die JavaScript-route aber berechnet Ihren pixel-Positionierung zur Laufzeit, und legen Sie fest so dass Sie nicht bekommen, neu positioniert zweimal auf jedem scroll-event (wegen jitter), und nur die Größe ändern Sie im Fenster Größe ändern. Vielen Dank für Ihre Hilfe.

InformationsquelleAutor George Reith | 2013-06-03
  1. 7

    Können Sie den Effekt, den Sie möchten, wie folgt.

    Ihre HTML-snippet ist gut, wie es ist:

    <div id="content">
    <section>
        <h1>Heading 1</h1>
        <p>...</p>
    </section>
    <section>
        <h1>Heading 2</h1>
        <p>...</p>
    </section>
</div>

    und das CSS ist gut, aber nur erfordert einige Erklärungen:

    #content {
    overflow: visible; /* default, but important to notice */
}

section {
    float: left;
    width: 25%;
}

h1 {
    position: fixed;
    width: 25%;
    background: #00FF00;
    text-align: center;
}

    und die demo fiddle: http://jsfiddle.net/audetwebdesign/4zLMq/

    , Wie Das Funktioniert

    Ihre #content block nimmt die Verbleibende Breite auf der rechten Seite Ihres 200px Links gefloateten sidebar.

    Innerhalb #content Sie haben zwei linken schwebte section Elemente, die bis zu 25% des parent-Containers, in diesem Fall ist die Breite der view-port-panel.

    Ihrem Kind h1 Elemente haben position: fixed, was bedeutet, dass Ihre Breite von 25% wird auch berechnet, basierend auf der Breite des Viewports (nicht #content).

    Fall 1

    Wenn Sie möchten h1 und #content haben die gleiche Breite, die Sie benötigen, um die gleiche relative (25%), berechnet aus der gleichen enthaltenden block (view-port in diesem Fall).

    Jedoch den Wert von 25% nicht 25% der Verbleibende Platz, nachdem Sie die Rechnung für das schwebte sidebar. Aber vielleicht können Sie live mit dabei.

    Fall 2

    Sie stellen die Werte für die Breite und ein wenig leichter zu bestimmen, wenn Sie die Breite der Seitenleiste, um einen relativen Wert. Mit gemischten Einheiten ist immer ein Problem.

    • Vielen Dank, habe ich beschlossen zu gehen die JavaScript-route, wie ich es Tat erfordern die Breite zu nehmen, auf dem Bildschirm. Doch statt mit einer onscroll Ereignis ich berechnen die position und Breite in pixel und setzen Sie Sie fest über JavaScript-Code nach dem laden, da es verhindert, dass Sie flackert und wird neu positioniert zweimal auf jedem scroll-Ereignis. Allerdings ist dies eine Super Lösung, so werde ich Kennzeichnen diese als korrekt.
    • Ein jQuery - /JavaScript-gestützte Lösung ist hier sinnvoll. Wegen der gemischten Einheiten (px,%), ist es schwer zu bestimmen, die Breite übrigen rechts neben dem gefloateten element mit CSS allein. Es wäre gut, die JS-Lösung als Teil von diesem post. Ich habe ähnliche Fragen mehrmals in den letzten paar Monaten, so dass Sie sich um ein relativ Häufig auftretendes problem. Alle die besten!!!
    InformationsquelleAutor Marc Audet
  2. 0

    tldr; Kürzer und sauberer Lösung:

    h1 {
    width: inherit;
    ...

    Stolperte ich über diese Frage, mit einem ähnlichen Problem : mein container ist in der Größe können Anwender definiert über die Größe:beide (und beweglich zu!).

    Wenn ich folgte die akzeptierte Lösung, es impliziert, ich hatte das gleiche Requisiten zu meinem festen header in meinem container (oben, Links, Breite und Höhe...).

    Statt, Erben die Breite vom übergeordneten container funktioniert. Ich fand diese Art und Weise viel einfacher und es macht mehr Sinn, auch, getestet auf gängigen Browsern und Handys (demo).

    • wenn Sie erbte ein Prozentsatz der Breite relativ zum viewport statt des parent-node.
    InformationsquelleAutor Bigood
Schreibe einen Kommentar