Comment faire une largeur d'élément: 100% moins de rembourrage?


397

J'ai une entrée html.

L'entrée a padding: 5px 10px;Je veux que ce soit 100% de la largeur de la div parent (qui est fluide).

Cependant, l'utilisation de width: 100%;l'entrée 100% + 20pxpermet de contourner ce problème.

Exemple


1
Voir cette réponse que j'ai postée il n'y a pas 15 minutes: stackoverflow.com/questions/5219030/… Cela devrait fonctionner parfaitement pour vous, sauf si vous en avez besoin pour fonctionner dans IE7.
thirtydot

Si vous avez utilisé ma méthode, voyez la légère modification que je viens de faire sur ma réponse. Il assure un "rembourrage uniforme" dans certains navigateurs.
thirtydot

@Hailwood j'ai une solution qui garde le rembourrage inputet supporte IE7
Vladimir Starkov

Veuillez également voir la réponse ci-dessous en utilisant la fonction calc
Daan

Réponses:


487

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

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


5
Je ne pense pas que ce soit une mauvaise solution. En général, encapsuler des éléments dans un div supplémentaire est un bon moyen de garnir les éléments sans pousser la largeur globale de l'élément au-delà de son conteneur parent.
Jake Wilson

1
Le remplissage d'un div enveloppant produit également des résultats non identiques à l'ajout direct du remplissage à l'entrée.
Felix Fung

@thirtydot j'ai des solutions plus flexibles et élégantes qui gardent la largeur de l'entrée
Vladimir Starkov

8
@thirtydot ouais, il suffit de le laisser cassé pour IE7 et de laisser M $ corriger ça :)
Petr Peller

Cela préserve également les zones de texte de redimensionnement automatique pour chacun d'entre vous.
Michael J.Calkins

276

C'est pourquoi nous avons box-sizingen CSS.

J'ai édité votre exemple, et maintenant cela fonctionne dans Safari, Chrome, Firefox et Opera. Vérifiez-le: 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 comme IE7 ne le prennent pas en charge. Si vous recherchez une solution qui fonctionne dans les anciens IE, consultez les autres réponses.


3
+1, mais caniuse.com/#search=box-sizing IE 8? De plus, github.com/Schepp/box-sizing-polyfill semble fournir une solution pour IE 6-7.
Alix Axel

1
+1, c'est génial si vous ne vous souciez pas d'IE (lors de l'utilisation de PhoneGap par exemple)
Luke B.

3
Quel genre de magie est-ce? +1 pour la réponse et +1 pour le commentaire au-dessus de moi (c'est exactement ce dont j'ai besoin).
Eduard Luca

20
Cela devrait être le comportement par défaut .. au lieu de +20 à la largeur. Parfois, CSS semble sérieusement foiré.
Soth

2
Pour clarifier la prise en charge du dimensionnement de boîte sur IE, la propriété de dimensionnement d'IE dépend du mode de document IE, elle fonctionne en "mode standard IE8" et plus. Ainsi, cela fonctionnera également dans la version du navigateur IE8 si le mode document est "Mode standard IE8". J'espère que cela t'aides.
Sanjeev

40

Utilisez également le rembourrage en pourcentages et supprimez de la largeur:

rembourrage: 5%;
largeur: 90%;

19
Pour info, cette solution n'est idéale que pour les agencements non flexibles.
manchons

+1, le problème avec ce serait les frontières, je suppose. Normalement, ils ne semblent "droits" qu'avec 1 à 3 pixels max. Les résultats sont trop imprévisibles compte tenu des incohérences du navigateur concernant l'arrondi sous-pixel.
Alix Axel

27

Vous pouvez le faire sans utiliser box-sizinget pas des solutions claires comme width~=99%.

Démo sur jsFiddle :
entrez la description de l'image ici

  • Conserver les entrées paddingetborder
  • Ajouter à l'entrée horizontale négative margin= border-width+horizontal padding
  • Ajouter au wrapper d'entrée horizontal paddingégal à celui marginde 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 */ 
}

4
C'est une bonne astuce, pour utiliser la marge d'entrée et le remplissage pour le wrapper pour compenser le remplissage d'entrée.
maulik13

D'accord totalement !!! J'ai utilisé cette solution et elle fonctionne largement sans trucs sales! Cela devait être la solution à toutes sortes de ces réponses ..
Andre Figueiredo

Je ne comprends pas très bien le rôle de la marge négative - tout ce que je sais, c'est que si la valeur est erronée, la boîte se termine d'un côté, mais d'une manière ou d'une autre une marge symétrique corrige cela
Casebash

21

Utilisez css calc ()

Super simple et génial.

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

Comme vu ici: largeur Div 100% moins quantité fixe de pixels
Par webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Source originale: http://web-profile.com.ua/css/dev/css -largeur-100prc-moins-100px /

Je viens de le copier ici, car je l'ai presque manqué dans l'autre fil.


Vous devez cependant le programmer manuellement. Idéalement, il serait déterminé automatiquement.
JackHasaKeyboard

11

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

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

Cela étirera la partie intérieure à n'importe quelle largeur, elle devrait être inférieure aux 15 pixels de chaque côté.


Pourriez-vous publier un exemple complet d' width:autoapplication à un inputchamp?
jakubiszon

c'est seulement la moitié d'une réponse. la position par défaut des éléments est statique, donc gauche et droite ne feront rien ici. et la largeur auto est également la valeur initiale, donc .. toute cette réponse ne fait rien :)
honk31

5

Vous pouvez essayer quelques astuces de positionnement. Vous pouvez mettre l'entrée dans un div avec position: relativeet une hauteur fixe, puis sur l'entrée avoir position: absolute; left: 0; right: 0;et n'importe quel rembourrage que vous aimez.

Exemple en direct


Dans quels navigateurs avez-vous testé cela? :(
thirtydot

Hmm, ne fonctionne que dans Chrome. Mais je sais que j'ai aussi quelque chose de très similaire à travailler dans FF & IE.
Felix

Il semble que cela ne fonctionne pas avec les <input>éléments de Firefox (idk sur IE). Cela fonctionne avec <div>s, cependant. Et non, display: blocksur le <input>ça ne marche pas non plus: - /
Felix

5

Voici la recommandation de codeontrack.com , qui contient de bons exemples de solutions:

Au lieu de définir la largeur de la div à 100%, réglez-la sur auto et assurez-vous que la valeur <div>est définie sur display: block (par défaut pour <div>).


3
Vous ne devez pas publier de lien directement. Vous pouvez inclure les informations de ce lien. La raison en est, peut-être demain que ce lien ne sera pas disponible et votre réponse ne sera alors plus valide ..
Amnesh Goel

4

Déplacez le remplissage de la zone de saisie vers un élément wrapper.

<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 l'exemple ici: http://jsfiddle.net/L7wYD/1/


2

Comprenez simplement la différence entre la largeur: auto; et largeur: 100%; Largeur: auto; calculera (AUTO) MATICALEMENT la largeur afin de correspondre exactement à la valeur indiquée avec la div de l'emballage, y compris le rembourrage. La largeur de 100% élargit la largeur et ajoute le rembourrage.


Pouvez-vous inclure un exemple où cela fonctionne avec <input>? Sinon, vous envoyez simplement des gens dans une chasse aux oies sauvages.
M. Lister

0

Qu'en est-il de l'emballage dans un récipient. Le conteneur doit avoir un style comme:

{
    width:100%;
    border: 10px solid transparent;
}


-1

Pour moi, en utilisant margin:15px;padding:10px 0 15px 23px;width:100%, le résultat était le suivant:

entrez la description de l'image ici

La solution pour moi était d'utiliser width:autoau lieu dewidth:100% . Mon nouveau code était:

margin:15px;padding:10px 0 15px 23px;width:auto. Ensuite, l'élément s'est aligné correctement:

entrez la description de l'image ici


-1

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

width: 100%;
box-sizing: border-box;

-9

Tu peux le faire:

width: auto;
padding: 20px;

Ce n'est pas la même marge de 100%.
James
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.