Element mit fester position im responsive layout

Arbeite ich an einem responsive layout, und ich würde gerne ein widget zu bleiben fest/klebrig, was bedeutet, es werde Ihnen Folgen, wie Sie nach unten scrollen die Seite.

Vereinfachte HTML:

<div class="page">
    <div class="content"></div>
    <div class="sidebar">
        <div class="widget1"></div>
        <div class="widget2"></div>
    </div>
</div>

CSS:

.page {
    width:96%;
    max-width:1000px;
    margin:0 auto;
}
.content {
    width:65%;
}
.sidebar {
    width:28%;
    float:right;
}
.widget1 {
    position:fixed;
    padding:7.15%; /* 20px of 280px */
    z-index:10;
}

Das problem: widget1 wird aus dem Fluss durch hinzufügen position:fixed. Dies führt in der Polsterung Prozentsatz wird errechnet aus dem Körper und vollständig zerstört mein layout. Weil es entfernt von der Strömung, ist es auch nicht mehr bis 100% der Breite der Seitenleiste.

, Was ich brauche: haben widget1 (mit einem Anteil von padding) passen Sie die Breite der sidebar.

Die nächste Lösung, die ich gefunden habe schlägt hinzufügen width:inherit auf dem festen element. Dies funktioniert gut, aber nur, wenn die Eltern die Breite in Pixel, nicht in Prozent. Es hilft auch nicht mit der Tatsache, dass ich muss hinzufügen Polsterung.

Jede Einsicht oder Anregungen würde sehr geschätzt werden. Ich würde lieber eine CSS Lösung, aber ich bin nicht gegen die Verwendung von jQuery.

Falls es hilft, ich arbeite an einem responsive theme basiert auf Twenty Ten. Die Website ist hier: http://odin.reaktortest.no/hvorfor-velge-fixit/
Es ist die beige box würde ich gerne halten Sie fest (#iwajax_contact_widget-2).

  • wie meinst du es wird in der Größe verändert?
  • Zu der Seite max-Breite der widget nimmt 28% / 280px von der Seite Breite ohne Feste Positionierung. Mit der festen Positionierung es heraus schwappt nach rechts und wird zu 435px. Die Höhe ändert sich auch. Die Herstellung der viewport kleiner macht es kleiner als 435px, so scheint es, wie es ist mit dem Prozentsatz von etwas anderem...
  • Bearbeitet meine Frage, weil ich herausgefunden habe, das problem, zwar nicht, wie fix es doch.
InformationsquelleAutor sarahjadesigns | 2013-10-03
  1. 1

    Können Sie dies lösen, indem Sie jquery

    var new_width = $('#sidebar').width();
$('.widget').width(new_width);
    • Dies kommt in der Nähe, um es zu beheben, aber das widget heraus schwappt das Recht des übergeordneten divs (.page und .sidebar). Der Betrag, den es heraus schwappt, scheint die Größe der Links und rechts Polsterung kombiniert. Ich habe versucht, das hinzufügen box-sizing:border-box um die widget-CSS, aber das hat das problem nicht beheben.
    InformationsquelleAutor
  2. -1

    Gelten Ihre Eltern tag position:relative und dann gelten für Ihre sidebar als position:fixed und versuchen mit dieser zu z-index:9999.

    Dank.

    • Leider funktioniert dies nicht, löst nicht das eigentliche problem des widget erste re-sized.
    InformationsquelleAutor Krunal Shah
Schreibe einen Kommentar