ancho: 100% - relleno?

Esta es la razón por la que tenemos box-sizing en CSS.

He editado tu ejemplo, y ahora funciona en Safari, Chrome, Firefox y Opera. Échale un vistazo: http://jsfiddle.net/mathias/Bupr3 / Todo lo que agregué fue esto:

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

Desafortunadamente los navegadores más antiguos como IE7 no soportan esto. Si estás buscando una solución que funcione en IEs antiguos, echa un vistazo a las otras respuestas.

Use relleno en porcentajes también y elimine del ancho:

padding: 5%;
width: 90%;

Puede hacerlo sin usar box-sizing y soluciones no claras como width~=99%.

Demostración en jsFiddle:

• Mantener las entradas padding y border
• Añadir a la entrada horizontal negativo margin = border-width + horizontal padding
• Añadir a la envoltura de entrada horizontal padding igual a margin del paso anterior

Marcado 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 ()

Súper simple e impresionante.

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

Como se ve aquí: Div ancho 100% menos cantidad fija de píxeles
Por webvitaly ( https://stackoverflow.com/users/713523/webvitaly)
Fuente Original: http://web-profile.com.ua/css/dev/css-width-100prc-minus-100px/

Acabo de copiar esto aquí, porque casi me lo pierdo en el otro hilo.

Suponiendo que estoy en un contenedor con relleno de 15px, esto es lo que siempre uso para la parte interior:

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

Que estirará la parte interior a cualquier ancho que debe ser menos el 15px cada lado.

Salud

Andy

Puedes probar algunos trucos de posicionamiento. Puede poner la entrada en un div con position: relative y una altura fija, luego en la entrada tiene position: absolute; left: 0; right: 0;, y cualquier relleno que desee.

Ejemplo en vivo

Aquí está la recomendación de codeontrack.com , que tiene buenos ejemplos de solución:

En lugar de establecer el ancho del div en 100%, establézcalo en auto, y asegúrese de que <div> esté configurado para mostrar: bloque (predeterminado para <div>).

Mueva el relleno de la caja de entrada a un elemento 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>

Ver ejemplo aquí: http://jsfiddle.net/L7wYD/1/

Qué hay de envolverlo en un recipiente. El contenedor debería tener un estilo como:

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

Tuve el mismo problema. Solucionarlo así:

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

Salud

Prueba esto:

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

Solo entiende la diferencia entre width: auto; y width:100%; Width: auto; calculará (AUTO)MÁTICAMENTE el ancho para que se ajuste exactamente al div de envoltura, incluido el relleno. Width 100% expande el ancho y agrega el relleno.

Puedes hacer esto:

width: auto;
padding: 20px;