Est-il possible d'obtenir une valeur négative avec CSS calc()?

Disons que nous avons un conteneur qui est centré dans la fenêtre d'affichage ...

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

... et à l'intérieur de ce conteneur, j'ai un autre qui doit avoir une largeur de 100% de la largeur de la fenêtre d'affichage. Je pourrais définir la marge ...

.widest{margin: 0 -480px}

... par exemple. Le truc, c'est que la valeur ne sera -480px, mais en fait, la largeur de la fenêtre d'affichage (960px) - l' .centré largeur /2 ... tout bon et facile avec calc(), seulement j'ai besoin d'un résultat qui est une valeur négative.

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

J'ai essayé de soustraire le lot de 0 à obtenir une valeur négative, mais pas y aller.

Je ne veux pas utiliser de JS et je n'ai que des problèmes dans Webkit - pas avec le calc() mais mon problème est que si je bidouille dans la soumission en faisant ...

.widest{
  margin: 0 -100%;
}

... ma page défile horisontally dans Chrome/Safari.

Vos pensées?

OriginalL'auteur Jayx | 2014-08-08

  1. 17

    Oui, c'est possible, à un certain point. La partie essentielle est de définir la largeur de l'élément de 100vw alors compensé par l'effet négatif de la moitié de la largeur de la fenêtre d'affichage, plus de la moitié de la largeur de l'centrée élément en utilisant, par exemple,calc(-50vw + 200px):

    Démo De Violon

    Donné le code 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);
}
    Qui pourrait fonctionner si la mise en page est aussi simple que cela, et je peux me résoudre à cela, mais le conteneur qui doit devenir un "bracelet" en travers de la page n'a pas la même hauteur partout (même si la hauteur est fixe) - je vais aussi avoir à régler margin/padding vers le haut de l'élément suivant à l'empêcher d'être recouvert par #full
    ... aussi: je voudrais vraiment savoir si il est possible d'obtenir une valeur négative de calc()
    voir mise à jour de réponse: jsfiddle.net/swfour/Lhvzn99L/1
    J'aime bien les deux approches, mais celui-ci sent un peu moins hackish ... aussi se sentir un peu idiots pour ne pas comprendre cela par moi-même. Merci
    c'est une bonne solution. Je ne peux pas, cependant, de comprendre comment le faire fonctionner pour répondre fluid-ish disposition où le #center n'a pas une largeur statique, mais un max-width, comme ici

    OriginalL'auteur SW4

  2. 21

    EDIT: UN truc plus simple que les précédentes: calc(0px - something) - avec une unité - les travaux, tandis que calc(0 - something) ne l'est pas. Voir Fiddle 3

    Ces "trucs" de travail:

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

    où 0 - something n'a pas (du moins avec votre exemple).

    Violon 1

    Violon 2

    calc(-1 * something) est incroyable!
    vous pouvez également faire calc( quel que soit / -1 )

    OriginalL'auteur FelipeAls

  3. 1

    J'ai une autre solution possible. Vous pouvez diviser par -2, donc vous aurez un Résultat négatif

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

    OriginalL'auteur sneduka