Ist es möglich um einen negativen Wert mit CSS calc()?

Sagen wir, wir haben einen container, der zentriert im viewport ...

.centered{margin: 0 auto; width:960px;}

... und in dem container habe ich ein anderes, dass muss eine Breite von 100% der viewport-Breite. Ich könnte die Marge ...

.widest{margin: 0 -480px}

... zum Beispiel. Die Sache ist die, dass der Wert nicht -480px, aber eigentlich ist die viewport-Breite (960px) - die .zentriert width /2 ... alles gut und einfach mit calc(), nur ich brauche ein Ergebnis, dass ein negativer Wert.

.widest{
  margin: 0 calc( (100vw - 960px) / 2 );
}

Habe ich versucht, die Subtraktion der Menge von 0 zu bekommen, ein negativer Wert, wird aber nicht gehen.

Möchte ich nicht verwenden, JS und ich habe nur Probleme in Webkit - nicht mit der calc() aber mein problem ist, dass wenn ich Hacke es in die Unterwerfung durch macht ...

.widest{
  margin: 0 -100%;
}

... meine Seite scrollt horisontally in Chrome/Safari.

Ihre Gedanken?

InformationsquelleAutor Jayx | 2014-08-08
  1. 19

    Ja, das ist möglich, bis zu einem Punkt. Der entscheidende Teil ist, um die Breite des Elements zu 100vw dann wird es ausgeglichen durch die negative Hälfte der viewport-Breite plus die Hälfte der Breite des zentrierten element verwenden, z.B. calc(-50vw + 200px):

    Demo-Fiddle

    Angesichts der HTML -

    <div id='center'>center
    <div id='full'>full width</div>
</div>

    CSS

    html, body {
    height:100%;
    width:100%;
    margin:0;
    padding:0;
    text-align:center;
    position:relative;
}
#center {
    width:400px;
    height:100%;
    background:red;
    margin:0 auto;
}
#full {
    width:100vw;
    height:100px;
    background:green;
    margin-left:calc(-50vw + 200px);
}
    • Das würde funktionieren, wenn das layout war dies einfach, und ich kann nur aufgelöst wird, sondern der container, die benötigt werden, um ein "Gurt" quer über die Seite nicht die gleiche Höhe haben überall (obwohl die Höhe ist fest, wo eingesetzt) - werde ich auch noch einstellen margin/padding auf die Spitze des nächsten Elements zu verhindern, überlagert von #voll
    • ... also: ich würde wirklich gerne wissen, ob es möglich ist, zu einem negativen Wert von calc()
    • siehe aktualisierte Antwort: jsfiddle.net/swfour/Lhvzn99L/1
    • Ich mag beide Ansätze, aber diese fühlt sich ein wenig weniger hackish ... auch das Gefühl ein bisschen verrückt für nicht herauszufinden this out durch mich. Dank
    • dies ist eine schöne Lösung. Doch ich kann nicht herausfinden, wie man es Arbeit für responsive fluid-ish-layout, wo die #center keine Feste Breite, sondern eine max-width wie hier
    • wenn ich das interpretiert hab deinen Punkt richtig, dieser Artikel enthält die geforderte Lösung für ein fluid center. .full-width { width: 100vw; position: relative; left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; } css-tricks.com/full-width-containers-limited-width-parents

    InformationsquelleAutor SW4
  2. 26

    EDIT: EIN einfacher trick als in den Vorjahren: calc(0px - something) - mit einem Gerät - arbeitet während calc(0 - something) nicht. Sehen Geige 3

    Diese "tricks" funktionieren:

    calc(1px - something - 1px);
calc(-1 * something)
calc(0px - something) /* new */

    wo 0 - something nicht (zumindest bei deinem Beispiel).

    Fiddle 1

    Fiddle 2

    • calc(-1 * something) ist erstaunlich!
    • Sie können auch tun, calc( wie auch immer der / -1 )
    InformationsquelleAutor FelipeAls
  3. 1

    Ich habe eine weitere mögliche Lösung. Sie kann teilen durch -2, so erhalten Sie ein negatives Ergebnis

    .widest{
  margin-left: calc( (100vw - 960px) / -2 );
}
    InformationsquelleAutor sneduka
  4. 1

    Könnten Sie versuchen, nächste Lösung

    .some-class {
   margin-left: calc(-1px - ((100vw - 100%) / 2) + 1px);
}
    InformationsquelleAutor Oleg Sewruk
Schreibe einen Kommentar