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

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

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.

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

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

estofamento: 5%;
largura: 90%;

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

Demonstração em jsFiddle :

• 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 */ 
}

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.

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

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

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/

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.

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

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

Tente o seguinte:

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

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

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:

Eu tive o mesmo problema. Corrija assim:

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

Você consegue fazer isso:

width: auto;
padding: 20px;