Comment puis-je faire width = 100%

153

En CSS, comment puis-je faire quelque chose comme ça:

width: 100% - 100px;

Je suppose que c'est assez simple, mais il est un peu difficile de trouver des exemples montrant cela.

html css fmsf
la source

1

La question liée stackoverflow.com/questions/11093943/… donne une réponse intéressante, mais pas totalement rétrocompatible, peut-être aimeriez-vous y jeter un coup d'œil.

11684

5

Pour tous ceux qui franchissent cette question, Chad a répondu que les navigateurs modernes prennent en charge width: calc(100% - 100px);quelques réponses et j'espère que le demandeur mettra à jour sa question :) :)

Anders M.

278

Les navigateurs modernes prennent désormais en charge:

width: calc(100% - 100px);

Pour voir la liste des versions de navigateur prises en charge, puis-je utiliser calc () comme valeur d'unité CSS?

Il existe une solution de secours jQuery: css width: calc (100% -100px); alternative utilisant jquery

Tchad
la source

13

J'ai trouvé quand j'utilisais calc(100% - 6px)par exemple qu'il s'affichait comme calc(94%), je devais y échapper comme suit et maintenant cela fonctionnewidth: calc(~"100% - 6px");

nsilva

12

Attention, vous devez avoir des espaces autour du caractère -(ou +). Cela fonctionne: calc(100% - 100px); Et cela ne fonctionne pas:calc(100%-100px);

freefaller

Je suis un peu surpris qu'il n'y ait pas d'option pour soustraire automatiquement 2x le remplissage de l'élément, ce qui serait généralement un cas d'utilisation assez courant. Par exemple, je finis par devoir faire padding: 0.25em; width: calc(100% - 2 * 0.25em - 2em);, et je devrais changer le 0.25emen deux endroits maintenant s'il doit être modifié.

cnst

Merci beaucoup, je voudrais également noter que cela fonctionne pour l'ajout: (100% + 100px)

Viktor Mellgren

99

Pourriez-vous imbriquer un div avec margin-left: 50px;et à l' margin-right: 50px;intérieur d'un <div>avec width: 100%;?

Aric TenEyck
la source

4

largeur: calc (100% - 100px); c'est plutôt la bonne réponse.

Sushan

17

Vous pouvez essayer ceci ...

<!--First Solution-->
width: calc(100% - 100px);
<!--Second Solution-->
width: calc(100vh - 100px);

Développer l'extrait

vw: largeur de la fenêtre

vh: hauteur de la fenêtre

barış çıracı
la source

La première solution est correcte, le conteneur peut ne pas être la fenêtre et donc 100vh peut ne pas être égal à 100%

Ben Taliadoros

1

J'ai trouvé quand j'utilisais calc(100% - 6px)par exemple qu'il s'affichait comme calc(94%), je devais y échapper comme suit et maintenant ça marchewidth: calc(~"100% - 6px");

nsilva

4

mon code, et cela fonctionne pour IE6:

<style>
#container {margin:0 auto; width:100%;}
#header { height:100px; background:#9c6; margin-bottom:5px;}
#mainContent { height:500px; margin-bottom:5px;}
#sidebar { float:left; width:100px; height:500px; background:#cf9;}
#content { margin-left:100px; height:500px; background:#ffa;}

</style>

<div id="container">
  <div id="header">header</div>
  <div id="mainContent">
    <div id="sidebar">left</div>
    <div id="content">right 100% - 100px</div>
  <span style="display:none"></span></div>
</div>

entrez la description de l'image ici

lbweek
la source

6

À quoi sert ce Javascript?

Faiz

3

Vous devez avoir un conteneur pour votre div de contenu que vous souhaitez être 100% - 100px

#container {
   width: 100%
}
#content {
   margin-right:100px;
   width:100%;
}

<div id="container">
  <div id="content">
      Your content here
  </div>
</div>

Vous devrez peut-être ajouter une division de compensation juste avant la dernière </div>si votre division de contenu déborde.

<div style="clear:both; height:1px; line-height:0">&nbsp;</div>

Aleemb
la source

1

Cela ne fonctionnera pas. La largeur du contenu sera de 100%: jsfiddle.net/cuezK/1

gilly3

2

Définir les marges du corps sur 0, la largeur du conteneur externe sur 100% et utiliser un conteneur interne avec des marges gauche / droite de 50 px semble fonctionner.

<style>
body {
    margin: 0;
    padding: 0;
}

.full-width
{
    width: 100%;
}

.innerContainer
{
    margin: 0px 50px 0px 50px;
}
</style>

<body>
  <div class="full-width" style="background-color: #ff0000;">
    <div class="innerContainer" style="background-color: #00ff00;">
      content here
    </div>
  </div>
</body>

Tvanfosson
la source

2

En travaillant avec des panneaux d'amorçage, je cherchais comment placer le lien «supprimer» dans le panneau d'en-tête, qui ne serait pas masqué par un long élément voisin. Et voici la solution:

html:

<div class="with-right-link">
    <a class="left-link" href="#">Long link header Long link header</a>
    <a class="right-link" href="#">Delete</a>
</div>

css:

.with-right-link { position: relative; width: 275px; }
a.left-link { display: inline-block; margin-right: 100px; }
a.right-link { position: absolute; top: 0; right: 0; }

Bien sûr, vous pouvez modifier les valeurs "top" et "right", en fonction de vos indentations. La source

Artur Loginov
la source

2

Cela n'a commencé à fonctionner pour moi que lorsque j'ai vérifié tous les espaces. Donc, cela ne fonctionnait pas comme ça: width: calc(100%- 20px)ou calc(100%-20px)et fonctionnait parfaitement avec width: calc(100% - 20px).

Alina Babycheva
la source

1

Pourrais tu:

margin-right: 50px;
margin-left: 50px;

Edit: Ma solution est fausse. La solution publiée par Aric TenEyck suggérant d'utiliser un div avec une largeur de 100% puis d'imbriquer un autre div en utilisant les marges semble plus correcte.

Tina Orooji
la source

3

Si vous faites cela, ne vous retrouverez-vous pas avec une largeur totale de 100% + 100px?

Adam Crume

: o (Je suis désolé. Dois-je supprimer mon message ou dois-je le laisser et laisser les votes vers le bas le pousser vers le bas?

Tina Orooji

1

les votes à la baisse sont généralement destinés à vous encourager à nettoyer votre publication afin que vous puissiez récupérer les points de représentation perdus par les votes négatifs. Si vous savez que votre solution est fausse, vous pouvez la supprimer avec ou sans votes négatifs ou la mettre à jour pour la corriger.

aleemb

@AdamCrume - Non. Ce ne serait le cas que si vous le spécifiez également width:100%. Un div remplira automatiquement le conteneur à moins que vous ne le remplaciez, par exemple en spécifiant explicitement width, ou en utilisant floatun positionnement absolu. Ajouter une marge à un div le fera simplement remplir son conteneur, moins le montant spécifié par la marge.

gilly3

@aleemb - Dans ce cas, les votes négatifs sont des utilisateurs qui ne comprennent pas le CSS car cette réponse est parfaitement correcte.

gilly3

1

Le rembourrage sur la div externe obtiendra l'effet désiré.

<html>
<head>
<style>
    #outer{
        padding: 0 50px;
        border:1px solid black; /*for visualization*/
    }

    #inner{
        border:1px solid red; /*for visualization*/
    }
</style>
</head>
<body>
<div id="outer">
    <div id="inner">
        100px smaller than outer
    </div>
</div>
</body>
</html>

Josh Bush
la source

1

Il existe 2 techniques qui peuvent être utiles pour ce scénario courant. Chacun a ses inconvénients mais peut parfois être utile.

box-sizing: border-box inclut le remplissage et la largeur de la bordure dans la largeur d'un élément. Par exemple, si vous définissez la largeur d'un div avec un remplissage de 20px 20px et une bordure de 1px à 100px, la largeur réelle serait de 142px, mais avec une zone de bordure, le remplissage et la marge sont à l'intérieur des 100px.

.bb{
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;     
    width: 100%;
    height:200px;
    padding: 50px;
}

Voici un excellent article à ce sujet: http://css-tricks.com/box-sizing/ et voici un violon http://jsfiddle.net/L3Rvw/

Et puis il y a la position: absolue

.padded{
    position: absolute;
    top: 50px;
    right: 50px;
    left: 50px;
    bottom: 50px;
    background-color: #aefebc;
}

http://jsfiddle.net/Mw9CT/1/

Bien sûr, ni l'un ni l'autre ne sont parfaits, le dimensionnement de la boîte ne correspond pas exactement à la question car l'élément a en fait une largeur de 100%, plutôt que 100% - 100px (quelle que soit la taille d'un div enfant). Et le positionnement absolu ne peut certainement pas être utilisé dans toutes les situations, mais il est généralement acceptable tant que la hauteur du parent est définie.

Dave
la source

0

Le CSS ne peut pas être utilisé pour l'animation, ni pour toute modification de style sur les événements.

Le seul moyen est d'utiliser une fonction javascript, qui retournera la largeur d'un élément donné, puis lui soustrayera 100px et définira la nouvelle taille de largeur.

En supposant que vous utilisez jQuery, vous pouvez faire quelque chose comme ça:

oldWidth = $('#yourElem').width();
$('#yourElem').width(oldWidth-100);

Et avec javascript natif:

oldWidth = document.getElementById('yourElem').clientWidth;
document.getElementById('yourElem').style.width = oldWidth-100+'px';

Nous supposons que vous avez un style css défini avec 100%;

Boris Guéry
la source

0

Utilisez-vous le mode standard? Cette solution en dépend je pense.

Si vous essayez de créer 2 colonnes, vous pouvez faire quelque chose comme ceci:

<div id="outer">
    <div id="left">
        sidebar
    </div>
    <div id="main">
        lorem ispsum etc... 
    </div>
</div>

Ensuite, utilisez CSS pour le styliser:

div#outer
{
    width:100%;
    height: 500px;
}

div#left
{
    width: 100px;
    height: 100%;
    float:left;
    background: green;
}

div#main
{
   width: auto;
   margin-left: 100px; /* same as div#left width */
   height: 100%;
   background:red;
}

Si vous ne voulez pas 2 colonnes, vous pouvez probablement supprimer <div id="left">

Hannson
la source

0

<div style="width: 200px; border: 1px solid red;">
    <br>
    <div style="margin: 0px 50px 0px 50px; border: 1px solid blue;">
        <br>
    </div>
    <br>
</div>

RC.
la source

0

Vous pouvez envisager d'utiliser LESS , qui est un fichier JavaScript qui pré-traite votre CSS afin que vous puissiez inclure une logique et des variables dans votre CSS. Donc pour votre exemple, en LESS vous écririez width: 100% - 100px;pour obtenir exactement ce que vous vouliez :)

Jon
la source

-1

Vous ne pouvez pas.

Vous pouvez cependant utiliser des marges pour obtenir le même résultat.

Traingamer
la source

-1

Cela marche:

margin-right:100px;
width:auto;

user1552559
la source

1

Pourriez-vous s'il vous plaît ajouter une explication à votre réponse?

Michał Perłakowski

J'ai essayé: calc (100% -100px) et les résultats ne sont pas cohérents sur toutes les plates-formes / navigateurs, puis j'ai essayé de vraiment simplifier et utilisé margin-right: 100px; largeur: auto; et cela a fonctionné ...

user1552559

calc est un composant CSS3 et ce css fonctionnera sur les navigateurs prenant en charge CSS3.

Sushan

-2

La réponse courte est que vous ne faites pas cela en CSS. Internet Explorer prend en charge quelque chose appelé Expressions CSS, mais ce n'est pas standard et n'est certainement pas pris en charge par d'autres navigateurs comme FireFox par exemple.

Vous feriez mieux de le faire en JavaScript.

Praveen Angyan
la source

Ouais je suppose que je vais devoir le garder en javascript, je réfracte du code et je voulais supprimer le javascript qui faisait ce tks.

fmsf

1

S'il vous plaît, si vous pouvez l'éviter, ne le faites pas en JavaScript. HTML + CSS peut être délicat et la solution n'est peut-être pas évidente, mais elle peut probablement faire presque tout ce dont vous avez besoin. L'utilisation de JavaScript pour les mises en page statiques est presque toujours une mauvaise idée.

Nicole

Comment puis-je faire width = 100% - 100px en CSS?

Réponses: