largeur: 100% - rembourrage?

j'ai une entrée html.

L'entrée padding: 5px 10px; je veux qu'il soit 100% de la div parent de la largeur(qui est liquide).

cependant, l'utilisation de width: 100%; fait que l'entrée est 100% + 20px Comment puis-je contourner cela?

exemple

322
demandé sur Hailwood 2011-03-07 14:35:07
la source

14 ответов

box-sizing: border-box est un moyen rapide et facile de le réparer:

ce fonctionnera dans tous les navigateurs modernes , et IE8+.

Voici une démo: http://jsfiddle.net/thirtydot/QkmSk/301 /

.content {
    width: 100%;
    box-sizing: border-box;
}

les versions préfixées du navigateur ( -webkit-box-sizing , etc.) ne sont pas nécessaires dans les navigateurs modernes.

370
répondu thirtydot 2018-08-06 16:26:53
la source

C'est pourquoi nous avons box-sizing dans CSS.

j'ai édité votre exemple, et maintenant il fonctionne en Safari, Chrome, Firefox, et Opera. Regarde: http://jsfiddle.net/mathias/Bupr3 / Tout ce que j'ai ajouté était ceci:

input {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

malheureusement, les navigateurs plus anciens tels que IE7 ne supportent pas cela. Si vous êtes à la recherche d'une solution qui fonctionne dans les vieux, vérifiez les autres réponses.

270
répondu Mathias Bynens 2012-01-31 16:08:12
la source

utiliser le rembourrage dans les pourcentages aussi et retirer de la largeur:

padding: 5%;
width: 90%;
38
répondu Alex 2011-03-07 15:00:55
la source

vous pouvez le faire sans utiliser box-sizing et pas clair solutions comme width~=99% .

Démo sur jsFiddle :

enter image description here

  • Keep input padding et border
  • ajouter à l'entrée négatif horizontal margin = border-width + horizontal padding
  • ajouter à l'enveloppe d'entrée horizontale padding égale à margin de l'étape précédente

balisage HTML:

<div class="input_wrap">
    <input type="text" />
</div>

CSS:

div {
    padding: 6px 10px; /* equal to negative input's margin for mimic normal `div` box-sizing */
}

input {
    width: 100%; /* force to expand to container's width */ 
    padding: 5px 10px;
    border: none;
    margin: 0 -10px; /* negative margin = border-width + horizontal padding */ 
}
25
répondu Vladimir Starkov 2012-06-28 09:54:09
la source

Utiliser les css calc()

Super simple et génial.

input {
width: -moz-calc(100% - 15px);
width: -webkit-calc(100% - 15px);
width: calc(100% - 15px);
}​

Comme on le voit ici: Div de largeur 100% moins d'une quantité fixe de pixels

Par webvitaly ( https://stackoverflow.com/users/713523/webvitaly )

Source originale: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

vient de copier ceci ici, parce que je l'ai presque manqué dans l'autre fil.

16
répondu Daan 2017-05-23 14:54:48
la source

si je suis dans un conteneur avec un rembourrage 15px, c'est ce que j'utilise toujours pour la partie intérieure:

width:auto;
right:15px;
left:15px;

qui étendra la partie intérieure à n'importe quelle largeur il devrait être moins les 15px de chaque côté.

Cheers

Andy

7
répondu Andology 2013-11-29 16:42:44
la source

vous pouvez essayer quelques astuces de positionnement. Vous pouvez mettre de l'entrée dans un div avec position: relative et une hauteur fixe, puis sur l'entrée ont position: absolute; left: 0; right: 0; , et tout rembourrage vous le souhaitez.

Live exemple

4
répondu Felix 2011-03-07 14:58:13
la source

Voici la recommandation de codeontrack.com , qui a de bons exemples de solution:

au lieu de définir la largeur du div à 100%, définissez-le à auto, et assurez-vous que le <div> est défini pour afficher: block (par défaut pour <div> ).

3
répondu M.YPC 2016-02-01 01:18:54
la source

déplacer le rembourrage de la boîte de saisie à un élément d'enrubannage.

<style>
div.outer{ background: red; padding: 10px; }
div.inner { border: 1px solid #888; padding: 5px 10px; background: white; }
input { width: 100%; border: none }
</style>

<div class="outer">
    <div class="inner">
       <input/>
    </div>
</div>

Voir exemple ici: http://jsfiddle.net/L7wYD/1 /

2
répondu Martin Jespersen 2011-03-07 15:16:25
la source

Qu'en est-il de l'emballer dans un conteneur. Conteneur shoud ont le style comme:

{
    width:100%;
    border: 10px solid transparent;
}
0
répondu Vitali Protosovitski 2015-08-21 17:09:43
la source

j'ai eu le même problème. Fixez - le comme ceci:

width: 100%;
padding: 5px;
/*--------------Now remove from padding what you've added---------------*/
margin:-5px;

Cheers

0
répondu manualva 2015-11-24 16:11:56
la source

essayez ceci:

width: 100%;
box-sizing: border-box;
0
répondu Manolo Ramos 2015-12-03 18:55:39
la source

il suffit de comprendre la différence entre la largeur:auto; et la largeur: 100%; Largeur:auto; (AUTO)calculer AUTOMATIQUEMENT la largeur pour s'adapter à la exact donné avec de l'emballage div, y compris le remplissage. Largeur 100% élargit la largeur et ajoute le rembourrage.

0
répondu user3849374 2017-05-15 20:18:46
la source

Vous pouvez faire ceci:

width: auto;
padding: 20px;
-8
répondu MissHD 2013-07-21 07:15:37
la source

Autres questions sur html css width fluid-layout