Como criar uma largura de elemento: 100% menos preenchimento?


397

Eu tenho uma entrada html.

A entrada tem padding: 5px 10px;eu quero que seja 100% da largura da div pai (que é fluido).

No entanto, o uso width: 100%;faz com que a entrada seja 100% + 20pxcomo posso contornar isso?

Exemplo


11
Veja esta resposta que eu postei há 15 minutos: stackoverflow.com/questions/5219030/… Isso deve funcionar perfeitamente para você, a menos que você precise que ele funcione no IE7.
thirtydot

Se você usou meu método, veja a ligeira edição que acabei de fazer na minha resposta. Ele garante "preenchimento uniforme" em alguns navegadores.
thirtydot

@Hailwood eu tenho solução que manter preenchimento para inpute apoiar IE7
Vladimir Starkov

Por favor, veja também a resposta abaixo usando a função calc
Daan

Respostas:


486

box-sizing: border-box é uma maneira rápida e fácil de corrigi-lo:

Isso funcionará em todos os navegadores modernos e no IE8 +.

Aqui está uma demonstração: http://jsfiddle.net/thirtydot/QkmSk/301/

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

As versões com prefixo do navegador ( -webkit-box-sizing, etc.) não são necessárias nos navegadores modernos.


5
Não acho que isso seja uma solução tão ruim. Em geral, agrupar elementos em uma div extra é uma boa maneira de preencher elementos sem empurrar a largura geral do elemento além do contêiner pai.
23411 Jake Wilson

11
O preenchimento de uma div de empacotamento também produz resultados não idênticos ao adicionar preenchimento diretamente à entrada.
Felix Fung

@thirtydot eu tenho algumas soluções mais flexíveis e elegantes que mantém a largura da entrada
Vladimir Starkov

8
@thirtydot sim, apenas deixá-lo quebrado para IE7 e deixar M $ correção que :)
Petr Peller

Isso também preserva áreas de texto de redimensionamento automático para qualquer um de vocês, pessoas do jQuery, em comparação com o tamanho da caixa, a menos que você aplique isso na div oculta.
22813 Michael J. Calkins

276

É por isso que temos box-sizingem CSS.

Editei o seu exemplo e agora ele funciona no Safari, Chrome, Firefox e Opera. Confira: http://jsfiddle.net/mathias/Bupr3/ Tudo o que eu adicionei foi este:

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

Infelizmente, navegadores mais antigos como o IE7 não suportam isso. Se você está procurando uma solução que funcione em IEs antigos, confira as outras respostas.


3
+1, mas caniuse.com/#search=box-sizing IE 8? Além disso, o github.com/Schepp/box-sizing-polyfill parece fornecer uma solução para o IE 6-7.
Alix Axel

11
+1, isso é ótimo se você não se preocupam com o IE (ao usar PhoneGap por exemplo)
Luke B.

3
Que tipo de magia é essa? +1 na resposta e +1 no comentário acima de mim (é exatamente para isso que eu preciso).
Eduard Luca

20
Esse deve ser o comportamento padrão. Em vez de +20 na largura. Às vezes, o CSS parece seriamente confuso.
Soth

2
Para esclarecer o suporte ao dimensionamento de caixas no IE, a propriedade de dimensionamento de caixas do IE depende do modo de documento do IE, funciona no "modo de padrões do IE8" e superior. Portanto, ele funcionará na versão do navegador IE8 também se o modo de documento for "modo IE8 Standards". Espero que isto ajude.
Sanjeev

40

Use o preenchimento também em porcentagens e remova da largura:

estofamento: 5%;
largura: 90%;

19
Fyi, esta solução é ideal apenas para layouts não flexíveis.
regalos

+1, o problema com isso seria as fronteiras, eu acho. Normalmente, eles só parecem "certos" com 1 a 3 pixels no máximo. Os resultados são imprevisíveis, considerando as inconsistências do navegador em relação ao arredondamento de sub-pixels.
Alix Axel

27

Você pode fazê-lo sem usar box-sizinge não soluções claras como width~=99%.

Demonstração em jsFiddle :
insira a descrição da imagem aqui

  • Mantenha as entradas paddingeborder
  • Adicionar à entrada horizontal negativo margin= border-width+horizontal padding
  • Adicione ao wrapper da entrada horizontal paddingigual a marginda etapa anterior

Marcação 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
Esse é um bom truque: usar margem para entrada e preenchimento para invólucro para compensar o preenchimento de entrada.
maulik13

Concordo totalmente !!! Eu usei essa solução e ela funciona amplamente sem truques sujos! Isto tinha de ser a solução para todos os tipos de estas respostas ..
Andre Figueiredo

Eu não entendo muito bem o papel que a margem negativa tem - Tudo que sei é que, se o valor está errado, então a caixa acaba para um lado, mas de alguma forma simétrica correções margem deste
Casebash

21

Use css calc ()

Super simples e incrível.

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

Como visto aqui: Largura da div 100% menos quantidade fixa de pixels
Por webvitaly ( https://stackoverflow.com/users/713523/webvitaly )
Fonte original: http://web-profile.com.ua/css/dev/css -width-100prc-menos-100px /

Apenas copiei isso aqui, porque eu quase perdi no outro segmento.


Você precisa programar isso manualmente, no entanto. Idealmente, seria determinado automaticamente.
JackHasaKeyboard

11

Supondo que eu esteja em um contêiner com preenchimento de 15px, é isso que eu sempre uso para a parte interna:

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

Isso esticará a parte interna para qualquer largura que seja menor que 15 px em ambos os lados.


Você poderia postar um exemplo completo de width:autoaplicado a um inputcampo?
jakubiszon

isso é apenas meia resposta. a posição padrão dos elementos é estática; portanto, esquerda e direita não farão exatamente nada aqui. e auto largura é também o valor inicial, assim .. toda esta resposta não é nada :)
honk31

5

Você pode tentar alguns truques de posicionamento. Você pode colocar a entrada em uma div com position: relativeuma altura fixa e, em seguida, na entrada have position: absolute; left: 0; right: 0;e em qualquer preenchimento que desejar.

Exemplo ao vivo


Em quais navegadores você testou isso? :(
trintadot 7/03/2019

Hmm, funciona apenas no Chrome. Mas eu sei que tenho algo muito semelhante para trabalhar também no FF & IE.
Felix

Parece que não está funcionando com <input>elementos no Firefox (idk sobre o IE). Mas funciona com <div>s. E não, display: blockno <input>também não funciona: - /
Felix

5

Aqui está a recomendação do codeontrack.com , que tem bons exemplos de soluções:

Em vez de definir a largura da div como 100%, defina-a como automática e verifique se <div>está configurada para exibir: block (padrão para <div>).


3
Você não deve postar o link diretamente. Você pode incluir as informações desse link. O motivo é, pode ser amanhã essa ligação não estará disponível e sua resposta será então já não é válida ..
Amnesh Goel

4

Mova o preenchimento da caixa de entrada para um elemento de invólucro.

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

Veja o exemplo aqui: http://jsfiddle.net/L7wYD/1/


2

Apenas entenda a diferença entre width: auto; e largura: 100%; Largura: auto; (AUTO) calculará MATICALMENTE a largura, a fim de ajustar exatamente o dado com a div de empacotamento, incluindo o preenchimento. Largura 100% expande a largura e adiciona o preenchimento.


Você pode incluir um exemplo em que isso funcione com <input>? Caso contrário, você está apenas enviando pessoas em um ganso selvagem.
Lister

0

Que tal envolvê-lo em um recipiente. O shoud do contêiner tem estilo como:

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


-1

Para mim, usando margin:15px;padding:10px 0 15px 23px;width:100%, o resultado foi este:

insira a descrição da imagem aqui

A solução para mim foi usar em width:autovez de width:100%. Meu novo código era:

margin:15px;padding:10px 0 15px 23px;width:auto. Em seguida, o elemento alinhado corretamente:

insira a descrição da imagem aqui


-1

Eu tive o mesmo problema. Corrija assim:

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.