22 Voix

CSS: 100% largeur moins nombre fixe de pixels

Question de Compi | 28/10/2022 à 11:21

J'ai une boîte DIV dans HTML dont largeur devrait dépendre de la largeur de l'élément parent. Cependant, pas toute la largeur (100%) mais un peu plus petite.

Donc, j'ai besoin d'une règle CSS telle que "width: 100% - 50px", ce qui ne fonctionne pas bien sûr. Malheureusement, je ne peux pas travailler avec 80% ou quelque chose comme ça, car la marge devrait toujours avoir une largeur fixe.

Y a-t-il une possibilité de résoudre ce problème en utilisant CSS?

RépondrePositifNégatif
Avatar NetLabel
2Meilleure Réponse2 Voix

CSS3 fournit la nouvelle fonction CSS calc() exactement  à cet effet. À l'aide de calc(), vous pouvez calculer les longueurs à l'aide d'équations.

Dans votre cas, vous pouvez spécifier ce qui suit:

.madiv {
   width: calc(100% - 50px);
}

Tous les navigateurs nouveaux et actuels devraient supporter et comprendre cela.

Si vous le souhaitez, vous pouvez spécifier une largeur de secours pour les anciens navigateurs avant la largeur calc, par exemple: .madiv {width: 80%; width: calc(100% - 50px);}
28/10/2022 à 14:25

RépondrePositif Négatif
Répondre

Sujets Connexes

CSS: Comment inclure CSS dans HTML

Tutoriel | 0 Commentaires

Réécrire Fichiers Texte avec une Longueur de Ligne Fixe

Tutoriel | 0 Commentaires

Trouver des Polices à largeur fixe sur l'Ordinateur

Tutoriel | 0 Commentaires

CSS: Style pour Police à Largeur de Caractère Fixe

Question | 1 Réponse

CSS: span avec une largeur fixe

Question | 1 Réponse

jQuery: Compter les Éléments, les Images, les Classes, etc.

Conseil | 0 Commentaires

Tabulateur CSS

Conseil | 0 Commentaires

Avis Important

Veuillez noter: Les contributions publiées sur askingbox.com sont des contributions d’utilisateurs et ne doivent pas remplacer les conseils d’un professionnel. Ils ne sont pas vérifiés par des indépendants et ne reflètent pas nécessairement l’opinion de askingbox.com. Apprendre encore plus.

Participer

Posez votre propre question ou écrivez votre propre article sur askingbox.com. Voici comment.