web-dev-qa-db-fra.com

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 ...

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

... et à l'intérieur de ce conteneur, j'en 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 fait est que la valeur ne sera pas -480px, mais en fait la largeur de la fenêtre d'affichage (960px) - la largeur .centered/2 ... tout est 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 pour obtenir une valeur négative, mais non.

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

.widest{
  margin: 0 -100%;
}

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

Tes pensées?

csscalc
17
Jayx

Oui, c'est possible, jusqu'à un certain point. La partie cruciale consiste à définir la largeur de l'élément sur 100vw, Puis à la compenser par la moitié négative de la largeur de la fenêtre plus la moitié de la largeur de l'élément centré à l'aide, par ex. calc(-50vw + 200px):

violon de démonstration

Étant donné le 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);
}
22
SW4

EDIT: Une astuce plus simple que les précédentes: calc(0px - something) - avec une unité - fonctionne tandis que calc(0 - something) ne fonctionne pas. Voir Violon

Ces "astuces" fonctionnent:

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

où 0 - something non (du moins avec votre exemple).

Violon 1
violon 2

34
FelipeAls

Vous pouvez essayer la prochaine solution

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

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

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